vue项目使用element-ui

最近新建一个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】，要跟上时代的进步，不能开倒车啊

最后打包：