Element按需引入并且自动导入组件

项目开发时，为了减少打包体积，我们一般会进行各种优化，比如组件库的按需引入。因为很多情况下我们用到的可能就是表单组件和一些特殊情况需要的组件，全量引入是最不理想的情况。按需引入的话又需要我们手动注册要使用的组件，虽然可以使用循环等方法注册，但这也不是最好的方法。

最理想的情况是，我们开发像全量引入时那样使用组件库组件，组件根据我们的使用自动按需引入并注册。unplugin-vue-components就是能帮助我们做到这些事的插件。

因为自己技术栈是Vue，所以本篇只介绍跟Vue有关的

unplugin-vue-components

官网的介绍是Vue的按需组件自动导入

特征：

• 支持Vue2和Vue3
• 支持组件和指令
• 支持Typescript
• 支持vite、webpack、Vue-Cli、rollup、esBuild等
• 树摇，仅注册使用的组件
• 流行库的内置解析器

支持以下UI库的使用

• Ant Design Vue
• Element-UI
• Element-Plus
• BootstrapVue
• Vant
• Varlet UI
• View UI
• 。。。。。

从上面几个特征已经可以看到功能非常强大，几乎满足了我们所有的需求和使用场景

Vue + Element-UI使用

1、首先我们需要按照官网按需引入的步骤，并且按照我们的自动导入插件

npm install babel-plugin-component unplugin-vue-components -D

2、需要在.babelrc或者package.json中添加/修改下面内容

"plugins": [
	[
		"component",
		{
        	"libraryName": "element-ui",
        	"styleLibraryName": "theme-chalk"
      	}
	]
]

3、最后在我们的vue.config.js中新增下面的代码

// 引入插件
// 这里引入的Components根据实际情况来，用vite创建的项目就使用/vite下的，vue-cli不用说了，所以这里使用的是/webpack下的
const Components = require('unplugin-vue-components/webpack');
// 这里是引入自动导入组件库组件的插件，不知道引入的是什么可以看上面支持的组件库，或者根据IDE的提示选择
const { ElementUiResolver } from 'unplugin-vue-components/resolvers';
// 在plugins配置中使用
Components({
	dts: false, // 是否生成对应的d.ts文件，更多配置可以去官网查看
	resolvers: [
		ElementUiResolver(), // 使用的自动导入插件，这里可以配置多个
	]
})

4、最后把main.js处和组件库相关的就可以全部删除掉了

注意，前面步骤完成后，项目已经实现了按需引入了，可以打包看看体积，但此时可能会出现新的问题

表格的v-loading和其他组件的:loading不生效，并且控制台报错

解决办法：在main.js引入loading并注册指令

import { Loading } from 'element-ui';
Vue.use(Loading.directive);

项目中使用this.$message或其他this.$xxx不生效

解决办法：手动注册

import { Message } from 'element-ui';
Vue.prototype.$message = Message;

官方文档：https://www.npmjs.com/package/unplugin-vue-components
相关插件：https://www.npmjs.com/package/unplugin-auto-import