vite+vue2项目如何按需引入 elementUI

场景

elementUI 的官方文档介绍了怎么样按需引入：

• 对于 webpack + vue2 + elementUI 项目，可以参考 文档。 主要借助 babel-plugin-component实现按需引入
• 对于 vite + vue3 + elementPlus 项目，可以参考 文档。主要通过 unplugin-vue-components 和 unplugin-auto-import 实现按需引入

我的项目是 vite + vue2 的（引入了 vite-plugin-vue2 插件），所以记录下怎么在 vite + vue2 项目中按需引入 elementUI

下面我的项目依赖包，仅供参考

vite	vue	elementUI	vite-plugin-vue2	vite-plugin-vue2
4.5.1	2.16.10	2.15.14	2.0.3	0.26.0

做法

1. 安装 elementUI

yarn add element-ui

2. 安装 unplugin-vue-components

yarn add unplugin-vue-components -D

3. 修改 vite.config.js 文件，增加以下配置

import Components from 'unplugin-vue-components/vite';
import { ElementUiResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    // ...
    plugins: [
        Components({
            resolvers: [ElementUiResolver()],
        }),
    ]
    // ...
});

4. 在项目里直接使用即可，不需要写任何引入的逻辑

<!-- example -->
<el-button type="primary">按钮</el-button>

小结

1. 经过上面的处理，就能自动按需引入 elementui 的组件了。自测 npm run build 后，代码是处理过的，体积比全量引入小。
2. 如果有什么问题欢迎各位掘友评论区指出，随时修改 😘