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 文件中配置

1 import AutoImport from 'unplugin-auto-import/vite'
2 import Components from 'unplugin-vue-components/vite'
3 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
1 plugins: [ 
2       // 按需引入Element-plus
3       AutoImport({
4         resolvers: [ElementPlusResolver({ importStyle: false })]
5       }),
6       Components({
7         resolvers: [ElementPlusResolver()]
8       })
9     ],

 自动导入Element-plus/icons-vue

1.下载

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

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

 1  import IconResolver from "unplugin-icons/resolver";
 2  import Icons from "unplugin-icons/vite";
 3 
 4 plugins: [ 
 5     // 按需引入Element-plus //引入icon
 6     AutoImport({
 7       resolvers: [
 8         ElementPlusResolver({ importStyle: false }),
 9         IconResolver({ prefix: "icon" }),
10       ],
11     }),
12     Components({
13       resolvers: [
14         ElementPlusResolver(),
15         IconResolver({ enabledCollections: ["ep"] }),
16       ],
17     }),
18     Icons({ scale: 1, defaultClass: "inline-block", autoInstall: true }),
19   ],

 3.用法示例

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

 

posted @ 2023-09-26 10:41  tan253  阅读(528)  评论(0)  编辑  收藏  举报