vue-cli3+ 搭建pc端管理项目（四, 按需引入 element-ui，支持修改主题色）

pc 端的项目，ui 推荐使用 element-ui。毕竟 element-ui 是基于 vue 的，契合度会更高一些。

element-ui 有两种引入方式：全部引入，和 按需引入。

全部引入

先安装：npm i element-ui -S

// main.js

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

Vue.use(ElementUI);

全部引入，是把 element-ui 的所有模块都引入到项目中。但是，实际的使用中，并不会使用到所有模块，这个时候就会有资源浪费，最终打包的 vender.js 也会比较大。所以更加推荐按需引入，顾名思义，根据需要引入，用到哪个，引入哪个。

按需引入

安装： vue add element

如果项目中有未提交的文件，执行安装命令的时候，会有如下提示：

这个时候，建议大家，选 N，然后把未提交的文件 commit 之后，在执行命令。如果直接选择了Y，并且恰好 App.vue 文件有修改且没有提交，App.vue 文件会被覆盖。

选择引入方式。（Import on demand）

选择语言。（zh-CN）

安装成功之后，项目根目录中会多一个 babel.config.js 文件和 plugins 文件夹。如下：

 plugins 文件夹中的 element.js 就是配置 element-ui 按需引入的文件。

文件中默认引入了 Button。之后，项目中需要什么组件，在 element.js 文件中配置即可。

最后，在 main.js 中引入 element.js 。

这里需要注意的是，element.js 和 main.scss 的引入顺序。这里推荐 main.scss 在 element.js 之后，原因是：在某些情况下，需要对 element-ui 的样式重写，main.scss 后引入，对之前的样式会覆盖，这样重写样式会比较容易。如果 main.scss 先引入，想要重写 element-ui 的样式，则需要计算权重，只有权重大于 element-ui 的权重，样式才会生效。

修改主题色

element-ui 使用较为明亮的蓝色作为主题色，但是作为一个成熟的系统，要学会拥有属于自己的颜色，这个时候，修改主题色，就是很好的解决方案。

这里只说项目中使用了 scss 修改主题色的情况，如果没有使用 scss，也想修改主题色，请参考官网的解决方案：https://element.eleme.cn/2.13/#/zh-CN/component/custom-theme

在 plugins 文件夹中，新建 element-variables.scss 文件，并在 element.js 中引入。然后在 element-variables.scss 文件中对 element-ui 中的变量重写，即可达到修改主题色，或者自定义主题的效果。

比如，想要修改主题色，只要对 $--color-primary 重新赋值就可以。如下：

// element-variables.scss

/* 改变主题色变量 */
$--color-primary: #1CB19D;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "node_modules/element-ui/packages/theme-chalk/src/index";

这里需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

// element.js

import Vue from 'vue'
import { Button, Link } from 'element-ui'

import './element-variables.scss'

Vue.use(Button)
Vue.use(Link)

以上，就实现了把主题色由 #409eff 改成了 #1cb19d。

如果想要修改其他颜色，同样对变量重新赋值就可以了。element-ui 全部的变量，可参照：https://github.com/smile1828/element/blob/dev/packages/theme-chalk/src/common/var.scss

项目地址：

github地址

gitee地址

系列文章：

vue-cli3+ 搭建pc端管理项目（一, 项目创建）

vue-cli3+ 搭建pc端管理项目（二, 不同环境配置[开发，测试，生产]）

vue-cli3+ 搭建pc端管理项目（三, css预处理器scss使用）

vue-cli3+ 搭建pc端管理项目（五, axios 使用及封装）