场景

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

做法

安装 elementUI

sh 复制代码

yarn add element-ui

安装 unplugin-vue-components

sh 复制代码

yarn add unplugin-vue-components -D

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

sh 复制代码

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

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

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

html 复制代码

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

小结

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