安装插件
javascript
cnpm i -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
修改vite.config.ts
javascript
// 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图标自动导入:
javascript
cnpm i -D unplugin-icons
vite.config.ts增加:
javascript
// 自动导入图标
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。有更好的方法欢迎留言。
用法:
javascript
<script setup lang="ts">
import { ElMessageBox } from "element-plus";
ElMessageBox({/**/})
</script>
感谢你的阅读,如对你有帮助请收藏+关注!
只分享干货实战 和精品 ,从不啰嗦!!!
如某处不对请留言评论,欢迎指正~
博主可收徒、常玩QQ飞车,可一起来玩玩鸭~