概述:vue3项目自动引入vue api和elementplus组件库,包括vue,vue-router,element-plus组件,element-plus图标。
1、 vite版本:4.4.9;
vue版本:3.2.37;
element-plus:2.3.7
2、安装插件:
yarn add unplugin-auto-import@0.16.6 unplugin-vue-components@0.25.2 -D
unplugin-auto-import:
(1)、https://github.com/unplugin/unplugin-auto-import
(2)、在vite.config.ts文件中配置
AutoImport({
imports: [
"vue", // 自动引入vue内容
"vue-router", // 自动引入vue-router内容
{
// 部分vue内容不能自动引入,可单独引入
from: "vue",
imports: ["UnwrapRef", "PropType"],
type: true,
},
],
dts: true, // 是否默认生成引入文件(auto-imports.d.ts)为字符串时可指定引入文件的路径
}),
unplugin-vue-components
(1)、https://github.com/unplugin/unplugin-vue-components
(2)、element-plus官方文档中的说明如下
(3)、在vite.config.ts文件中配置
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
...
AutoImport({
resolvers: [ElementPlusResolver()],
imports: [
"vue",
"vue-router",
{
from: "vue",
imports: ["UnwrapRef", "PropType"],
type: true,
},
],
dts: true,
}),
Components({
dts: true,
resolvers: [
ElementPlusResolver({
importStyle: "sass", // 用于指定项目所使用的样式扩展语言,默认值为css
}),
],
dirs: [], // 默认值为'src/components',若未设为空数组,将自动引入项目文件src/components目录下的组件
}),
...
(4)、注意:unplugin-vue-components插件可以自动引入Element Plus组件库,但是它不会自动引入图标和类型。这是因为unplugin-vue-components主要负责的是组件的引入,而图标和类型通常需要额外的配置。
(5)、引入element-plus图标库
如果你想要在项目中使用Element Plus的图标,你需要在你的主入口文件(通常是main.js或main.ts)中手动引入Element Plus的图标库。
import "element-plus/theme-chalk/index.css";
import "element-plus/dist/index.full";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
...
注意:在element-plus组件库官方文件中,在按钮或其他组件中使用图标时,通常会使用 的格式,自动引入图标库之后,若在vue文件中删除原本的图标引入语句之后,需将图标使用格式修改为,避免将Edit解析为变量,而提示未引入或未定义等报错信息。
(6)、element-plus组件库中的类型需要在对应vue文件单独引入,否则将报错。(也可使用其他方式统一引入,因时间问题未实现)