vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线-CSDN博客

本文链接：https://blog.csdn.net/web220507/article/details/126478879

本文介绍了如何在Vue项目中通过babel-plugin-component实现Element-UI的按需引入，以减小打包体积，并详细阐述了Element-UI主题的定制过程，包括安装主题工具、创建自定义变量文件和通过Node API构建自定义主题，以实现项目的个性化UI需求。

摘要由CSDN通过智能技术生成

前言

目前项目用的vue + element-ui，之前有了解过element-ui真正的按需引入，也有了解到主题定制，之前的项目都是根据element-ui的类及标签，在全局或者局部进行一大堆样式覆盖，达到自己项目ui的样式，项目中按需引入实际也并没有真正实现按需引入。趁此新起的项目。实践一下对 element-ui 主题和组件方面来优化。

完整引入

完整地将 ui 和样式引入。

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

在页面简单使用 button组件，看看效果。

<el-button type="primary">Login</el-button>

再看一下打包后的资源大小情况npm run build --report。

Hash: 40db03677fe41f7369f6
Version: webpack 3.12.0
Time: 20874msAsset SizeChunksChunk Namesstatic/css/app.cb8131545d15085cee647fe45f1d5561.css 234 kB 1[emitted] app static/fonts/element-icons.732389d.ttf56 kB[emitted] static/js/vendor.a753ce0919c8d42e4488.js 824 kB 0[emitted][big]vendorstatic/js/app.8c4c97edfce9c9069ea3.js3.56 kB 1[emitted] app static/js/manifest.2ae2e69a05c33dfc65f8.js857 bytes 2[emitted] manifeststatic/fonts/element-icons.535877f.woff28.2 kB[emitted]
static/css/app.cb8131545d15085cee647fe45f1d5561.css.map 332 kB[emitted] static/js/vendor.a753ce0919c8d42e4488.js.