场景
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
后,代码是处理过的,体积比全量引入小。 - 如果有什么问题欢迎各位掘友评论区指出,随时修改 😘