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
sh 复制代码
yarn add element-ui
  1. 安装 unplugin-vue-components
sh 复制代码
yarn add unplugin-vue-components -D
  1. 修改 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()],
        }),
    ]
    // ...
});
  1. 在项目里直接使用即可,不需要写任何引入的逻辑
html 复制代码
<!-- example -->
<el-button type="primary">按钮</el-button>

小结

  1. 经过上面的处理,就能自动按需引入 elementui 的组件了。自测 npm run build 后,代码是处理过的,体积比全量引入小。
  2. 如果有什么问题欢迎各位掘友评论区指出,随时修改 😘
相关推荐
千码君20163 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
星光不问赶路人2 天前
一文搞清楚 TypeScript 中 triple-slash 与 tsconfig.types 有何区别?
typescript·vite
华仔啊3 天前
加班到凌晨,我用 Vue3 + ElementUI 写了个可编辑的表格组件
vue.js·element
PanZonghui3 天前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
星光不问赶路人7 天前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
tuuuuuun9 天前
Stomp 订阅模块化
websocket·vite
千码君201610 天前
React Native:使用vite创建react项目并熟悉react语法
javascript·css·react native·react.js·html·vite·jsx
雪山上的小灰熊11 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
Yu87512 天前
el-select-v2 滚动选中选项之后会自动回滚到顶部
element
guojb82414 天前
元数据驱动:打造动态灵活的Vue键值对表格组件
前端·vue.js·element