chore: element-plus 自动按需引入更改为完整引入

2025-04-20 10:59:21 +08:00 · 2022-05-05 17:18:58 +08:00 · 2022-05-05 17:18:58 +08:00 · f4984998d5
commit f4984998d5
parent 5c22bddbff
10 changed files with 30 additions and 195 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -10,9 +10,7 @@ module.exports = {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
-    withDefaults: "readonly",
-    // element-plus
-    ElMessage: "readonly"
+    withDefaults: "readonly"
  },
  extends: [
    "plugin:vue/vue3-essential",
@ -20,6 +18,8 @@ module.exports = {
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/eslint-config-typescript"
+    // unplugin-auto-import 自动生成的文件
+    // "./types/.eslintrc-auto-import.json"
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
--- a/package.json
+++ b/package.json
@ -57,8 +57,6 @@
    "prettier": "^2.6.2",
    "sass": "^1.51.0",
    "typescript": "^4.6.3",
-    "unplugin-auto-import": "^0.7.1",
-    "unplugin-vue-components": "^0.19.3",
    "vite": "^2.9.5",
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-eslint-parser": "^8.3.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,8 +31,6 @@ specifiers:
  sass: ^1.51.0
  screenfull: ^6.0.1
  typescript: ^4.6.3
-  unplugin-auto-import: ^0.7.1
-  unplugin-vue-components: ^0.19.3
  vite: ^2.9.5
  vite-plugin-svg-icons: ^2.0.1
  vue: ^3.2.33
@ -75,8 +73,6 @@ devDependencies:
  prettier: 2.6.2
  sass: 1.51.0
  typescript: 4.6.3
-  unplugin-auto-import: 0.7.1_vite@2.9.5
-  unplugin-vue-components: 0.19.3_vite@2.9.5+vue@3.2.33
  vite: 2.9.5_sass@1.51.0
  vite-plugin-svg-icons: 2.0.1_vite@2.9.5
  vue-eslint-parser: 8.3.0_eslint@8.14.0
@ -84,10 +80,6 @@ devDependencies:

 packages:

-  /@antfu/utils/0.5.1:
-    resolution: {integrity: sha512-8Afo0+xvYe1K8Wm4xHTymfTkpzy36aaqDvhXIayUwl+mecMG9Xzl3XjXa6swG6Bk8FBeQ646RyvmsYt6+2Be9g==}
-    dev: true
-
  /@babel/parser/7.17.9:
    resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==}
    engines: {node: '>=6.0.0'}
@ -169,14 +161,6 @@ packages:
      fastq: 1.13.0
    dev: true

-  /@rollup/pluginutils/4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
  /@sxzz/popperjs-es/2.11.6:
    resolution: {integrity: sha512-V8W+eJiInGq8roHR8xYR+lxojL022LyUI9E4FRav4+1Ih+875ONcLNK3XIs809fyxk1lNzrZO5OAy6xpvEafNw==}
    dev: false
@ -713,12 +697,6 @@ packages:
      concat-map: 0.0.1
    dev: true

-  /brace-expansion/2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-    dependencies:
-      balanced-match: 1.0.2
-    dev: true
-
  /braces/2.3.2:
    resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
    engines: {node: '>=0.10.0'}
@ -2190,11 +2168,6 @@ packages:
      json5: 1.0.1
    dev: true

-  /local-pkg/0.4.1:
-    resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==}
-    engines: {node: '>=14'}
-    dev: true
-
  /lodash-es/4.17.21:
    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
    dev: false
@ -2240,13 +2213,6 @@ packages:
    dependencies:
      sourcemap-codec: 1.4.8

-  /magic-string/0.26.1:
-    resolution: {integrity: sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==}
-    engines: {node: '>=12'}
-    dependencies:
-      sourcemap-codec: 1.4.8
-    dev: true
-
  /map-cache/0.2.2:
    resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
    engines: {node: '>=0.10.0'}
@ -2333,13 +2299,6 @@ packages:
      brace-expansion: 1.1.11
    dev: true

-  /minimatch/5.0.1:
-    resolution: {integrity: sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==}
-    engines: {node: '>=10'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: true
-
  /minimist/1.2.6:
    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
    dev: true
@ -3168,83 +3127,6 @@ packages:
    engines: {node: '>= 10.0.0'}
    dev: true

-  /unplugin-auto-import/0.7.1_vite@2.9.5:
-    resolution: {integrity: sha512-9865OV9eP99PNxHR2mtTDExeN01m4M9boT5U2BtIwsU1wDRsaFIYWLwcCBEjvXzXfTTC2NNMskhHGVAMfL2WgA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@vueuse/core': '*'
-    peerDependenciesMeta:
-      '@vueuse/core':
-        optional: true
-    dependencies:
-      '@antfu/utils': 0.5.1
-      '@rollup/pluginutils': 4.2.1
-      local-pkg: 0.4.1
-      magic-string: 0.26.1
-      resolve: 1.22.0
-      unplugin: 0.6.2_vite@2.9.5
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - vite
-      - webpack
-    dev: true
-
-  /unplugin-vue-components/0.19.3_vite@2.9.5+vue@3.2.33:
-    resolution: {integrity: sha512-z/kpYJnqrJuWglDNs7fy0YRHr41oLc07y2TkP3by6DqPb1GG9xGC9SFigeFwd4J7GVTqyFVsnjoeup7uK7I2dA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@babel/parser': ^7.15.8
-      '@babel/traverse': ^7.15.4
-      vue: 2 || 3
-    peerDependenciesMeta:
-      '@babel/parser':
-        optional: true
-      '@babel/traverse':
-        optional: true
-    dependencies:
-      '@antfu/utils': 0.5.1
-      '@rollup/pluginutils': 4.2.1
-      chokidar: 3.5.3
-      debug: 4.3.4
-      fast-glob: 3.2.11
-      local-pkg: 0.4.1
-      magic-string: 0.26.1
-      minimatch: 5.0.1
-      resolve: 1.22.0
-      unplugin: 0.6.2_vite@2.9.5
-      vue: 3.2.33
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - supports-color
-      - vite
-      - webpack
-    dev: true
-
-  /unplugin/0.6.2_vite@2.9.5:
-    resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      chokidar: 3.5.3
-      vite: 2.9.5_sass@1.51.0
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.3
-    dev: true
-
  /unset-value/1.0.0:
    resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
    engines: {node: '>=0.10.0'}
@ -3387,15 +3269,6 @@ packages:
      '@vue/shared': 3.2.33
    dev: false

-  /webpack-sources/3.2.3:
-    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
-    engines: {node: '>=10.13.0'}
-    dev: true
-
-  /webpack-virtual-modules/0.4.3:
-    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
-    dev: true
-
  /which/2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
    engines: {node: '>= 8'}
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ElMessage } from "element-plus"
 import { FullScreen } from "@element-plus/icons-vue"
 import screenfull from "screenfull"

--- a/src/main.ts
+++ b/src/main.ts
@ -3,15 +3,19 @@ import router from "./router"
 import "@/router/permission"
 import store from "./store"
 import App from "./App.vue"
-import * as directives from "@/directives"
+import ElementPlus from "element-plus"
+import "element-plus/dist/index.css"
 import loadSvg from "@/icons"
+import * as directives from "@/directives"
 import "@/styles/index.scss"
 import "normalize.css"

 const app = createApp(App)
-// 加载全局 svg
+/** element-plus 组件完整引入 */
+app.use(ElementPlus)
+/** 加载全局 svg */
 loadSvg(app)
-// 自定义指令
+/** 自定义指令 */
 Object.keys(directives).forEach((key) => {
  app.directive(key, (directives as { [key: string]: Directive })[key])
 })
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@ -2,6 +2,7 @@ import router from "@/router"
 import { RouteLocationNormalized } from "vue-router"
 import { useUserStoreHook } from "@/store/modules/user"
 import { usePermissionStoreHook } from "@/store/modules/permission"
+import { ElMessage } from "element-plus"
 import { whiteList } from "@/config/white-list"
 import { getToken } from "@/utils/cookies"
 import asyncRouteSettings from "@/config/async-route"
--- a/src/utils/service.ts
+++ b/src/utils/service.ts
@ -1,7 +1,8 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from "axios"
+import { useUserStoreHook } from "@/store/modules/user"
+import { ElMessage } from "element-plus"
 import { get } from "lodash-es"
 import { getToken } from "@/utils/cookies"
-import { useUserStoreHook } from "@/store/modules/user"

 /** 创建请求实例 */
 function createService() {
--- a/types/auto-imports.d.ts
+++ b/types/auto-imports.d.ts
@ -1,6 +0,0 @@
-// Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
-declare global {
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
-}
-export {}
--- a/types/components.d.ts
+++ b/types/components.d.ts
@ -1,40 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
-import '@vue/runtime-core'
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    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']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    Screenfull: typeof import('./../src/components/Screenfull/index.vue')['default']
-    SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
-    ThemeSwitch: typeof import('./../src/components/ThemeSwitch/index.vue')['default']
-  }
-}
-
-export {}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,9 +1,6 @@
 import { UserConfigExport } from "vite"
 import path, { resolve } from "path"
 import vue from "@vitejs/plugin-vue"
-import AutoImport from "unplugin-auto-import/vite"
-import Components from "unplugin-vue-components/vite"
-import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons"

 /** 配置项文档：https://vitejs.dev/config */
@ -72,21 +69,27 @@ export default (): UserConfigExport => {
    /** vite 插件 */
    plugins: [
      vue(),
-      /** 自动按需导入 */
-      AutoImport({
-        dts: "./types/auto-imports.d.ts",
-        resolvers: [ElementPlusResolver()]
-      }),
-      /** 自动按需导入 */
-      Components({
-        dts: "./types/components.d.ts",
-        resolvers: [ElementPlusResolver()]
-      }),
      /** svg */
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
        symbolId: "icon-[dir]-[name]"
      })
+      // AutoImport({
+      //   dts: "./types/auto-imports.d.ts",
+      //   /** 自动按需导入 element-plus 相关函数，比如 ElMessage */
+      //   resolvers: [ElementPlusResolver()],
+      //   /** 根据自动按需导入的相关 api，生成 .eslintrc-auto-import.json 文件供 eslint 识别 */
+      //   eslintrc: {
+      //     enabled: true, // 默认 false
+      //     filepath: "./types/.eslintrc-auto-import.json", // 默认 "./.eslintrc-auto-import.json"
+      //     globalsPropValue: true // 默认 true (true | false | "readonly" | "readable" | "writable" | "writeable")
+      //   }
+      // }),
+      // Components({
+      //   dts: "./types/components.d.ts",
+      //   /** 自动按需导入 element-plus 组件 */
+      //   resolvers: [ElementPlusResolver()]
+      // })
    ]
  }
 }