介绍
在后端项目中，按需引入是优化项目的一个方向。 在element-ui库中，如果想按需引入组件，需要安装babel-plugin-component，然后将.babelrc修改为：
{
"presets": [ ["es2015", { "modules": false } ] ],
"plugins": [ [ "component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]
]
}
还需要引入main.js中要使用的组件：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
在项目的不断迭代中webpack按需引用，可能会写出一长串需要用到的组件，最后几乎和全局引入一样。 而且按需导入还是会比全部导入占用更少的包装，而且导入太长的组件也很麻烦。
真香警告⚠
随着vue3生态的不断发展，支持的插件越来越多，使得vue3+vite项目越来越顺利。 element-plus+unplugin-auto-import的组合方式，让组件的使用更加灵活。
在element-plus中，如果需要安装进行按需导出，首先需要安装unplugin-vue-components和unplugin-auto-import这两个插件。
npm install -D unplugin-vue-components unplugin-auto-import
或者
yarn add unplugin-vue-components unplugin-auto-import -D
其中unplugin-auto-import不仅可以按需导出element-plus组件，还可以配置为手动按需导出vue、vue-router或vueuse。
调用vue3api时：
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
安装 unplugin-auto-import 后
const count = ref(0)
const doubled = computed(() => count.value * 2)
是不是方便很多呢？
el-icon中有多种样式可以在项目中使用，丰富的组件也伴随着打包后的项目文件的大小，于是unplugin-auto-import又站起来了，是的，它出手了再次。 使得el-icon的使用更加灵活，也让后端项目更加简洁。 你只需要在 vite.config 中配置它，它会处理剩下的事情。 引用官方推荐的配置用法如下：
在vite项目中引入表单：
import type { Plugin } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
const pathSrc = path.resolve(__dirname, "src");
import { configCompressPlugin } from "./compress";
import { configSvgIconsPlugin } from "./svgSprite";
export function createVitePlugins(mode: string, isBuild: boolean) {
const vitePlugins: (Plugin | Plugin[])[] = [
// have to
vue(),
// have to
// vueJsx(),
AutoImport({
// Auto import functions from Vue, e.g. ref, reactive, toRef...
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ["vue", "vue-router"],
// dirs: ["src/utils/request.ts"],
// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
resolvers: [
ElementPlusResolver(),
// Auto import icon components
// 自动导入图标组件
IconsResolver()
],
dts: path.resolve(pathSrc, "auto-imports.d.ts")
}),
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
enabledCollections: ["ep"]
}),
// Auto register Element Plus components
// 自动导入 Element Plus 组件
ElementPlusResolver()
],
dts: path.resolve(pathSrc, "components.d.ts")
}),
Icons({
autoInstall: true
})
];
return vitePlugins;
}
配置好组件后，node_modules会下两个依赖文件夹
当页面使用icon组件时：
<i-ep-location></i-ep-location>
component.d.ts 手动导出组件
解决错误提示
运行上述配置项目后，会出现一些错误信息，如
原因是，即使后面已经通过AutoImport手动引用了项目，并且没有做eslint和ts检查，下面也会添加它们的配置。
第一步：
unplugin-auto-import仓库有eslintrc-auto-import.json的配置参考
eslintrc: {
enabled: false, // Default `false`
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
}
添加设置。 配置enabled:true时，会根据filepath配置的路径生成.eslintrc-auto-import.json文件。
第二步：
将 auto-imports.d.ts 添加到 tsconfig.json 文件中的 include 配置
"include": [
"src/**/*.d.ts",
"types/**/*.d.ts",
"build/**/*.d.ts",
"./auto-imports.d.ts"
]
保存配置并查看项目文件后，没有警告或错误。
总结
大多数情况下，与 TS 指令相关的错误可能与 tsconfig 有关。 其实就是*.d.tswebpack按需引用，也可能是其他原因。 先阅读文档，然后分析问题，最后解决问题。
开启鹈鹕的成长之旅！这是我参加“掘金每日新计划·二月文章更新挑战”的第一天，点击查看活动详情
