+LIBRARY
- node: https://nodejs.org/en/
- yarn (也可以使用 npm 修改相關(guān)命令即可)
- vue cli 創(chuàng)建的 Vue@2.x 項(xiàng)目
- element-theme: https://github.com/ElementUI/element-theme
起步
打開命令行颖系，使用 vue-cli 創(chuàng)建一個(gè) vue 項(xiàng)目急灭，并安裝 element-ui 及構(gòu)建主題的 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 組件的默認(rèn)主題
- windows 下如果
node_sass安裝失敗，可以設(shè)置sass的安裝源為淘寶源，再重新用npm進(jìn)行安裝即可像寒。
$ 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/ 目錄，并生成一個(gè) scss 的配置文件
$ mkdir theme-config
$ yarn theme-install
# or
$ npm run theme-install
note: 這個(gè)目錄名字一定要跟 package.json script 配置的目錄一致
.scss 文件中包含主題顏色，圓角商虐、邊框等基礎(chǔ)樣式以及各個(gè)組件的一些樣式的配置, 如:
// 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;
根據(jù)自己項(xiàng)目的需求修改好之后，構(gòu)建出css文件
$ yarn theme-build
## or 你想監(jiān)聽變化進(jìn)行修改
$ yarn theme-watch
使用
我們可以新建一個(gè) src/theme-config/index.js 統(tǒng)一管理組件的樣式
使用全部組件
// 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)
引入到項(xiàng)目中
// /src/main.js
import './theme-config'
(end)
