elementPlus自动按需引入配

package.json

@@ -8,11 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "element-plus": "^2.3.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9"
   }
 }

src/App.vue

@@ -21,4 +21,6 @@ const addcount =()=>{
 <template>
   <div>八嘎{{ count }}</div>
   <button @click="setCount">{{ state.count }}</button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
 </template>

vite.config.js

@@ -3,10 +3,22 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+// elementPlus按需导入
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    // ...
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
   ],
   resolve: {
     alias: {