feat: 引入自动按需导入组件

package.json

@@ -51,6 +51,8 @@
     "sass": "1.78.0",
     "typescript": "5.6.3",
     "unocss": "0.64.1",
+    "unplugin-auto-import": "0.18.6",
+    "unplugin-vue-components": "0.27.5",
     "vite": "6.0.1",
     "vite-plugin-svg-icons": "2.0.1",
     "vite-svg-loader": "5.1.0",
@@ -62,16 +64,36 @@
   },
   "changelogithub": {
     "types": {
-      "feat": { "title": "Feat" },
-      "fix": { "title": "Fix" },
-      "perf": { "title": "Perf" },
-      "refactor": { "title": "Refactor" },
-      "docs": { "title": "Docs" },
-      "types": { "title": "Types" },
-      "test": { "title": "Test" },
-      "ci": { "title": "CI" },
-      "revert": { "title": "Revert" },
-      "chore": { "title": "Chore" }
+      "feat": {
+        "title": "Feat"
+      },
+      "fix": {
+        "title": "Fix"
+      },
+      "perf": {
+        "title": "Perf"
+      },
+      "refactor": {
+        "title": "Refactor"
+      },
+      "docs": {
+        "title": "Docs"
+      },
+      "types": {
+        "title": "Types"
+      },
+      "test": {
+        "title": "Test"
+      },
+      "ci": {
+        "title": "CI"
+      },
+      "revert": {
+        "title": "Revert"
+      },
+      "chore": {
+        "title": "Chore"
+      }
     }
   }
 }

pnpm-lock.yaml

@@ -111,6 +111,12 @@ importers:
       unocss:
         specifier: 0.64.1
         version: 0.64.1(postcss@5.2.18)(rollup@4.27.4)(vite@6.0.1(@types/node@22.10.1)(jiti@1.21.6)(sass@1.78.0)(tsx@4.19.2)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.3))
+      unplugin-auto-import:
+        specifier: 0.18.6
+        version: 0.18.6(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.6.3)))(rollup@4.27.4)
+      unplugin-vue-components:
+        specifier: 0.27.5
+        version: 0.27.5(@babel/parser@7.26.2)(rollup@4.27.4)(vue@3.5.13(typescript@5.6.3))
       vite:
         specifier: 6.0.1
         version: 6.0.1(@types/node@22.10.1)(jiti@1.21.6)(sass@1.78.0)(tsx@4.19.2)(yaml@2.6.1)
@@ -2561,6 +2567,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -3357,6 +3366,9 @@ packages:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
     engines: {node: ^14.0.0 || >=16.0.0}
 
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -3545,6 +3557,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strip-literal@2.1.1:
+    resolution: {integrity: sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==}
+
   supports-color@2.0.0:
     resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
     engines: {node: '>=0.8.0'}
@@ -3724,6 +3739,9 @@ packages:
   undici-types@6.20.0:
     resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
+  unimport@3.13.4:
+    resolution: {integrity: sha512-pRr4JO51pCQGjwDPToehYHaJLwZQbMQNBI3eGbZB1TzMHnWbQldApWe+bot7CgA03SFovF1bn03/WYFNi58rCw==}
+
   union-value@1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
     engines: {node: '>=0.10.0'}
@@ -3756,6 +3774,35 @@ packages:
       vite:
         optional: true
 
+  unplugin-auto-import@0.18.6:
+    resolution: {integrity: sha512-LMFzX5DtkTj/3wZuyG5bgKBoJ7WSgzqSGJ8ppDRdlvPh45mx6t6w3OcbExQi53n3xF5MYkNGPNR/HYOL95KL2A==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
+  unplugin-vue-components@0.27.5:
+    resolution: {integrity: sha512-m9j4goBeNwXyNN8oZHHxvIIYiG8FQ9UfmKWeNllpDvhU7btKNNELGPt+o3mckQKuPwrE7e0PvCsx+IWuDSD9Vg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@1.16.0:
+    resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
+    engines: {node: '>=14.0.0'}
+
   unset-value@1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -3932,6 +3979,9 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
@@ -6702,6 +6752,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
@@ -7693,6 +7745,8 @@ snapshots:
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
+  scule@1.3.0: {}
+
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -7899,6 +7953,10 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  strip-literal@2.1.1:
+    dependencies:
+      js-tokens: 9.0.1
+
   supports-color@2.0.0: {}
 
   supports-color@3.2.3:
@@ -8111,6 +8169,24 @@ snapshots:
 
   undici-types@6.20.0: {}
 
+  unimport@3.13.4(rollup@4.27.4):
+    dependencies:
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
+      acorn: 8.14.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.1
+      magic-string: 0.30.14
+      mlly: 1.7.3
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      scule: 1.3.0
+      strip-literal: 2.1.1
+      unplugin: 1.16.0
+    transitivePeerDependencies:
+      - rollup
+
   union-value@1.0.1:
     dependencies:
       arr-union: 3.1.0
@@ -8166,6 +8242,45 @@ snapshots:
       - supports-color
       - vue
 
+  unplugin-auto-import@0.18.6(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.6.3)))(rollup@4.27.4):
+    dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
+      fast-glob: 3.3.2
+      local-pkg: 0.5.1
+      magic-string: 0.30.14
+      minimatch: 9.0.5
+      unimport: 3.13.4(rollup@4.27.4)
+      unplugin: 1.16.0
+    optionalDependencies:
+      '@vueuse/core': 9.13.0(vue@3.5.13(typescript@5.6.3))
+    transitivePeerDependencies:
+      - rollup
+
+  unplugin-vue-components@0.27.5(@babel/parser@7.26.2)(rollup@4.27.4)(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
+      chokidar: 3.6.0
+      debug: 4.3.7
+      fast-glob: 3.3.2
+      local-pkg: 0.5.1
+      magic-string: 0.30.14
+      minimatch: 9.0.5
+      mlly: 1.7.3
+      unplugin: 1.16.0
+      vue: 3.5.13(typescript@5.6.3)
+    optionalDependencies:
+      '@babel/parser': 7.26.2
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  unplugin@1.16.0:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   unset-value@1.0.0:
     dependencies:
       has-value: 0.3.1
@@ -8349,6 +8464,8 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3

src/App.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useGreyAndColorWeakness } from "@@/composables/useGreyAndColorWeakness"
 import { useTheme } from "@@/composables/useTheme"
-import { ElNotification } from "element-plus"
 import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
 
 const { initTheme } = useTheme()

src/common/components/Notify/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { NotifyItem } from "./type"
 import { Bell } from "@element-plus/icons-vue"
-import { ElMessage } from "element-plus"
 import { computed, ref } from "vue"
 import { messageData, notifyData, todoData } from "./data"
 import List from "./List.vue"

src/common/components/Screenfull/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 import { computed, ref, watchEffect } from "vue"
 

src/common/components/SearchMenu/Modal.vue

@@ -4,7 +4,6 @@ import type { RouteRecordName, RouteRecordRaw } from "vue-router"
 import { usePermissionStore } from "@/pinia/stores/permission"
 import { useDevice } from "@@/composables/useDevice"
 import { isExternal } from "@@/utils/validate"
-import { ElMessage } from "element-plus"
 import { cloneDeep, debounce } from "lodash-es"
 import { computed, ref, shallowRef } from "vue"
 import { useRouter } from "vue-router"

src/common/composables/useFullscreenLoading.ts

@@ -1,5 +1,4 @@
 import type { LoadingOptions } from "element-plus"
-import { ElLoading } from "element-plus"
 
 interface UseFullscreenLoading {
   <T extends (...args: Parameters<T>) => ReturnType<T>>(

src/http/axios.ts

@@ -2,7 +2,6 @@ import type { AxiosInstance, AxiosRequestConfig } from "axios"
 import { useUserStore } from "@/pinia/stores/user"
 import { getToken } from "@@/utils/cache/cookies"
 import axios from "axios"
-import { ElMessage } from "element-plus"
 import { get, merge } from "lodash-es"
 
 /** 退出登录并强制刷新页面（会重定向到登录页） */

src/main.ts

@@ -1,9 +1,11 @@
+/* eslint-disable perfectionist/sort-imports */
+
 // core
-import App from "@/App.vue"
-import { pinia } from "@/pinia"
-import { installPlugins } from "@/plugins"
-import { router } from "@/router"
 import { createApp } from "vue"
+import { pinia } from "@/pinia"
+import { router } from "@/router"
+import { installPlugins } from "@/plugins"
+import App from "@/App.vue"
 // css
 import "uno.css"
 import "normalize.css"

src/pages/demo/composable-demo/apis/use-fetch-select.ts

@@ -1,5 +1,3 @@
-import { ElMessage } from "element-plus"
-
 /** 模拟接口响应数据 */
 const SELECT_RESPONSE_DATA = {
   code: 0,

src/pages/demo/composable-demo/use-fullscreen-loading.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useFullscreenLoading } from "@@/composables/useFullscreenLoading"
-import { ElMessage } from "element-plus"
 import { getErrorApi, getSuccessApi } from "./apis/use-fullscreen-loading"
 
 const svg = `

src/pages/demo/element-plus/index.vue

@@ -4,7 +4,6 @@ import type { FormInstance, FormRules } from "element-plus"
 import { createTableDataApi, deleteTableDataApi, getTableDataApi, updateTableDataApi } from "@@/apis/table"
 import { usePagination } from "@@/composables/usePagination"
 import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
-import { ElMessage, ElMessageBox } from "element-plus"
 import { cloneDeep } from "lodash-es"
 import { reactive, ref, watch } from "vue"
 

src/pages/demo/vxe-table/index.vue

@@ -3,7 +3,6 @@ import type { TableResponseData } from "@@/apis/table/type"
 import type { ElMessageBoxOptions } from "element-plus"
 import type { VxeFormInstance, VxeFormProps, VxeGridInstance, VxeGridProps, VxeModalInstance, VxeModalProps } from "vxe-table"
 import { deleteTableDataApi, getTableDataApi } from "@@/apis/table"
-import { ElMessage, ElMessageBox } from "element-plus"
 import { nextTick, reactive, ref } from "vue"
 import { RoleColumnSolts } from "./tsx/RoleColumnSolts"
 import { StatusColumnSolts } from "./tsx/StatusColumnSolts"

src/pages/login/index.vue

@@ -4,7 +4,6 @@ import type { LoginRequestData } from "./apis/type"
 import { useUserStore } from "@/pinia/stores/user"
 import ThemeSwitch from "@@/components/ThemeSwitch/index.vue"
 import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
-import { ElMessage } from "element-plus"
 import { reactive, ref } from "vue"
 import { useRouter } from "vue-router"
 import { getLoginCodeApi, loginApi } from "./apis"

src/plugins/element-plus.ts

@@ -1,7 +0,0 @@
-import type { App } from "vue"
-import ElementPlus from "element-plus"
-
-export function installElementPlus(app: App) {
-  // Element Plus 组件完整引入
-  app.use(ElementPlus)
-}

src/plugins/index.ts

@@ -1,12 +1,10 @@
 import type { App } from "vue"
-import { installElementPlus } from "./element-plus"
 import { installElementPlusIcons } from "./element-plus-icons"
 import { installPermissionDirective } from "./permission-directive"
 import { installSvgIcons } from "./svg-icons"
 import { installVxeTable } from "./vxe-table"
 
 export function installPlugins(app: App) {
-  installElementPlus(app)
   installElementPlusIcons(app)
   installPermissionDirective(app)
   installSvgIcons(app)

src/router/guard.ts

@@ -6,7 +6,6 @@ import { isWhiteList } from "@/router/whitelist"
 import { setRouteChange } from "@@/composables/useRouteListener"
 import { useTitle } from "@@/composables/useTitle"
 import { getToken } from "@@/utils/cache/cookies"
-import { ElMessage } from "element-plus"
 import NProgress from "nprogress"
 import "nprogress/nprogress.css"
 

types/auto-imports.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
+}

types/components.d.ts

@@ -0,0 +1,61 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBacktop: typeof import('element-plus/es')['ElBacktop']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}

vite.config.ts

@@ -4,6 +4,9 @@ import { resolve } from "node:path"
 import vue from "@vitejs/plugin-vue"
 import vueJsx from "@vitejs/plugin-vue-jsx"
 import UnoCSS from "unocss/vite"
+import AutoImport from "unplugin-auto-import/vite"
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
+import Components from "unplugin-vue-components/vite"
 import { defineConfig, loadEnv } from "vite"
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
 import svgLoader from "vite-svg-loader"
@@ -97,7 +100,16 @@ export default defineConfig(({ mode }) => {
         symbolId: "icon-[dir]-[name]"
       }),
       // 原子化 CSS
-      UnoCSS()
+      UnoCSS(),
+      // 自动按需导入
+      AutoImport({
+        dts: "types/auto-imports.d.ts",
+        resolvers: [ElementPlusResolver()]
+      }),
+      Components({
+        dts: "types/components.d.ts",
+        resolvers: [ElementPlusResolver()]
+      })
     ],
     // Configuring Vitest: https://cn.vitest.dev/config
     test: {