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. 如果有什么问题欢迎各位掘友评论区指出,随时修改 😘
相关推荐
前端赵哈哈1 天前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
前端赵哈哈2 天前
解决 Vue+TS 项目打包(vue-tsc -b && vite build)未使用变量提示 / 报错问题
前端·vue.js·vite
萌萌哒草头将军2 天前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
Noxi_lumors2 天前
VITE BALABALA require balabla not supported
前端·vite
牧野星辰2 天前
让el-table长个小脑袋,记住我的滚动位置
前端·javascript·element
可爱生存报告3 天前
vue3 vite quill-image-resize-module打包报错 Cannot set properties of undefined
前端·vite
xiaohe06013 天前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(二)
vite·rollup.js
Olrookie3 天前
RuoYi-Vue3项目中Swagger接口测试404,端口问题解析排查
前端·webpack·vite
米欧3 天前
使用luckysheet在线处理复杂表格
前端·excel·vite
国家不保护废物3 天前
Webpack 与 Vite:现代前端构建工具的双子星
前端·webpack·vite