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

极致♀雨2024-03-14 5:03

安装插件

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飞车，可一起来玩玩鸭~