Vue3-vite 按需引入Element-plus、Element-plus/icons-vue

自动导入Element-plus组件

1.下载unplugin-vue-components，unplugin-auto-import 包

npm i -D unplugin-vue-components unplugin-auto-import

2.vite.config.js 文件中配置

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

plugins: [ 
      // 按需引入Element-plus
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: false })]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ],

 自动导入Element-plus/icons-vue

1.下载

npm i -D @element-plus/icons-vue unplugin-icons 

2.vite.config.js 文件中配置

 import IconResolver from "unplugin-icons/resolver";
 import Icons from "unplugin-icons/vite";

plugins: [ 
    // 按需引入Element-plus //引入icon
    AutoImport({
      resolvers: [
        ElementPlusResolver({ importStyle: false }),
        IconResolver({ prefix: "icon" }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconResolver({ enabledCollections: ["ep"] }),
      ],
    }),
    Icons({ scale: 1, defaultClass: "inline-block", autoInstall: true }),
  ],

 3.用法示例

<IEpSearch /> // 或 <i-ep-search />