安装插件
cnpm i -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
修改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({}),],
})
然后就可以使用了！图标的我就直接全局导入了，想自动导入看下面：
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飞车，可一起来玩玩鸭~
