【Vite+Ts】自动按需引入Element-Plus

安装插件

cnpm i -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
1

修改vite.config.ts

// vite.config.ts
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import ElementPlus from "unplugin-element-plus/vite";

export default defineConfig({
  // ...
  plugins: [
   vue(),
   AutoImport({
     resolvers: [ElementPlusResolver()],
     dts: "types/auto-generate/auto-import.d.ts",
   }),
   Components({
     resolvers: [ElementPlusResolver()],
     dts: "types/auto-generate/components.d.ts",
   }),
   ElementPlus({}),
 ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

然后就可以使用了！图标的我就直接全局导入了，想自动导入看下面：

icon图标自动导入：

cnpm i -D unplugin-icons
1

vite.config.ts增加：

// 自动导入图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// plugins修改：
AutoImport({
  resolvers: [
  	ElementPlusResolver(),
  	// 自动导入图标组件
    IconsResolver({
      prefix: 'Icon',
    })
  ],
  dts: "types/auto-generate/auto-import.d.ts",
}),
Components({
  resolvers: [
  	ElementPlusResolver(),
  	// 自动注册图标组件
    IconsResolver({
      enabledCollections: ['ep'],
    }),
  ],
  dts: "types/auto-generate/components.d.ts",
}),
// 导入图标组件
Icons({
    autoInstall: true,
})

用法：
<el-icon><Plus /></el-icon>  错误
<el-icon><i-ep-plus /></el-icon>  正确

必须要加i-ep
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

关于页面 ElMessageBox 报错问题：

我目前最快的解决办法只能是单独引入ElMessageBox。有更好的方法欢迎留言。
用法：

<script setup lang="ts">
import { ElMessageBox } from "element-plus";
ElMessageBox({/**/})
</script>
1
2
3
4

感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~