最近新建一个vue项目，配置了element-ui，较之前使用时发生了些许变化，对新的配置方式进行记录
node版本 v14.21.3
npm版本 v6.14.18
vue版本 v2.6.14
element-ui版本 v2.15.13创建项目vue项目，使用vue-cli，就不做赘述了，可参考官网创建项目
1. 安装element-ui，引入项目
yarn add element-ui在main.js引入组件库及相关样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);完成引入，即可在项目中使用。
因为element-ui整个引入，项目依赖变得冗余，打包发现，多了好几M，不合理，这很不合理，对组件进行按需引入；
2. 配置按需引入组件
安装带三方插件babel-plugin-component
yarn add babel-plugin-component -D在src目录下新建文件夹element，element文件夹添加文件components.js，并进行按需组件挂载，可参考Element - The world's most popular Vue UI framework
import Vue from 'vue';
import {
Button
// 添加需要的组件
} from 'element-ui';
Vue.use(Button);修改main.js引入
// import ElementUI from 'element-ui';
import '@/element/components';
// Vue.use(ElementUI);修改项目配置文件babel.config.js为：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
注意：官网使用es2015，因为脚手架立项时未安装es2015这个依赖，改为使用@babel/preset-env代替
再次打包，dist小了很多，但是发现还有地方不合理，组件库样式还是全局引入的，再次调整配置
3. 调整element-ui样式配置
安装主题工具相关依赖
yarn add element-theme element-themex element-theme-chalk -D（1）初始化主题变量文件
./node_modules/.bin/et -i src/element/element-variables.scss（2）编译主题
./node_modules/.bin/et -c src/element/element-variables.scss -o src/element/theme因为可能重复修改主题变量，该命令可能重复执行，在package.json中添加自定义命令setui
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
// ...其他命令
"setui": "./node_modules/.bin/et -c src/element/element-variables.scss -o src/element/theme"
},（3）修改babel.config.js的styleLibraryName属性
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
// "styleLibraryName": "theme-chalk"
"styleLibraryName": "~src/element/theme"
}
]
]
}
(4) 修改main.js引入
// import 'element-ui/lib/theme-chalk/index.css';注意：
按照官网建议的主题生成工具element-theme会与node版本有不兼容报错，报错内容如下
解决方案：
【1】. 有降低node版本至11.15.0
【2】. 使用element-themex，参考ElementUI自定义主题报错“primordials is not defined”最佳解决方案 - Whidy Writes
我使用的方案【2】，要跟上时代的进步，不能开倒车啊
最后打包：
