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. 如果有什么问题欢迎各位掘友评论区指出,随时修改 😘
相关推荐
王小金Ryan3 天前
开发一个Vite插件,给所有DOM节点插入自定义属性
vue.js·vite
前端霸王防脱发洗发水5 天前
Vite常用插件配置
javascript·vue.js·vite
October_CanYang7 天前
elementUI中el-tree 展开收起(折叠)和 父节点半选状态初始化回显并传给接口
前端·vue.js·element
friend_ship8 天前
Vue3.0都有哪些新特性及优化点
vue.js·vite·vue3.0·es6新特性·proxy响应式对象
我看刑8 天前
el-datepicker禁用未来日期(包含时分秒)type=‘datetime’
前端·vue·element
jason_yang8 天前
vue3复习-源码-迷你版vite
vue.js·vite
jason_yang8 天前
vue3复习-源码-编译原理-自定义vite插件
vue.js·vite
小霖家的混江龙8 天前
Vite 打包 H5 如何注入版本号
前端·vite
web_code9 天前
vite依赖预构建(源码分析)
前端·面试·vite
October_CanYang9 天前
vue+ElementUI实现下拉分级菜单:el-select嵌套el-tree树形控件实现下拉树效果(附带模糊查询搜索功能)
vue.js·element