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. 如果有什么问题欢迎各位掘友评论区指出,随时修改 😘
相关推荐
闲坐含香咀翠2 天前
B端项目版本同步方案:基于Vite插件的自动化实践
前端·vite·rollup.js
Java陈序员2 天前
轻松设计 Logo!一款 Pornhub 风格的 Logo 在线生成器!
vue.js·node.js·vite
巴厘猫3 天前
从 0 到 1 搭建 Vue3 + Vite 组件库:流程、规范与最佳实践
前端·vue.js·vite
汪叽家的兔子羡3 天前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
执行上下文3 天前
Element Plus Upload 添加支持拖拽排序~
前端·javascript·element
独泪了无痕4 天前
Vite 模块动态导入之Glob导入
前端·vue.js·vite
一壶纱4 天前
vite 只是一个平台
vue.js·vite
用户84913717547164 天前
vue-element-plus-admin 深度剖析:第2期 -工程化实践与构建优化
前端框架·element·前端工程化
你这个年龄怎么睡得着的5 天前
玩转vite性能优化
前端·vue.js·vite
Mr_兔子先生5 天前
2025盛夏版:基于electron37+vite7的Vue桌面客户端保姆教程
vue.js·electron·vite