在 Vue 项目中配置一个 Element 组件库

+LIBRARY

• node: https://nodejs.org/en/
• yarn (也可以使用 npm 修改相关命令即可)
• vue cli 创建的 Vue@2.x 项目
• element-theme: https://github.com/ElementUI/element-theme

---

起步

打开命令行，使用 vue-cli 创建一个 vue 项目，并安装 element-ui 及构建主题的 npm 包

$ vue create project
$ cd project
project $ yarn add element-ui -S
project $ yarn add element-theme element-theme-chalk -D

note:

• element-theme 是生成element-ui主题的命令行工具
• element-theme-chalk element 组件的默认主题
• windows 下如果 node_sass 安装失败，可以设置sass的安装源为淘宝源，再重新用npm进行安装即可。

$ npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
$ npm i element-theme element-theme-chalk -D

---

配置样式

在 /package.json 的 script 添加下面命令，方便以后使用

// package.json
{
  "script": {
    "theme": "./node_modules/.bin/et",
    "theme-install": "./node_modules/.bin/et -i ./src/theme-config/theme-config.scss",
    "theme-build": "./node_modules/.bin/et -c ./src/theme-config/theme-config.scss -o ./src/theme-config/theme/",
    "theme-watch": "./node_modules/.bin/et -w -c ./src/theme-config/theme-config.scss -o ./src/theme-config/theme/"
  }
  // ...
}

新建 src/theme-config/ 目录，并生成一个 scss 的配置文件

$ mkdir theme-config 
$ yarn theme-install
# or 
$ npm run theme-install

note: 这个目录名字一定要跟 package.json script 配置的目录一致

.scss 文件中包含主题颜色，圆角、边框等基础样式以及各个组件的一些样式的配置, 如:

// theme-config.scss
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-base: #dcdfe6 !default;

$--select-border-color-hover: $--border-color-hover !default;
$--select-disabled-border: $--disabled-border-base !default;
$--select-font-size: $--font-size-base !default;
$--select-close-hover-color: $--color-text-secondary !default;

根据自己项目的需求修改好之后，构建出css文件

$ yarn theme-build

## or 你想监听变化进行修改
$ yarn theme-watch

---

使用

我们可以新建一个 src/theme-config/index.js 统一管理组件的样式

使用全部组件

// src/theme-config/index.js

import Vue from 'vue'
import Element from 'element-ui'
import './theme/index.css'

Vue.use(Element)

使用部分组件

// src/theme-config/index.js

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


import './theme/button.css'
import './theme/select.css'

Vue.use(Button)
Vue.use(Select)

引入到项目中

// /src/main.js
import './theme-config'

---

(end)