+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)
