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

安装插件

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

修改vite.config.ts

// vite.config.tsimport 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";exportdefaultdefineConfig({// ...plugins:[vue(),AutoImport({resolvers:[ElementPlusResolver()],dts:"types/auto-generate/auto-import.d.ts",}),Components({resolvers:[ElementPlusResolver()],dts:"types/auto-generate/components.d.ts",}),ElementPlus({}),],})

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

icon图标自动导入：

cnpm i -D unplugin-icons

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

关于页面 ElMessageBox 报错问题：

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

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

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