前言：
這篇文章記錄換膚的兩個方面：
1.基於elementui這個ui框架的換膚
2.在vue項目裏自己寫的內容的換膚
所用知識：
vue , elementui , vuex , sass , gulp-css-wrap

首行祭圖：

源碼地址： https://github.com/EmilyYoung71415/vue-admin-elementui
思路在此：
改變原有的elementui主題：
安裝elementui的自定義主題工具，然後初始化變量文件，得到elementui的scss文件，我們修改顏色就修改他的scss文件，然後編譯scss文件得到css文件，我們引用修改好了的css文件[實現覆蓋elementui的css文件]即可實現換膚。
至於動態換膚：
用上述方法生成不同主題[顏色值]的css文件後，我們怎麼實現動態切換呢？
我的辦法是：

生成不同的css顏色文件，每個文件內部命名前加上.custom-顏色值做命名空間。
然後app.vue裏引入全部的顏色文件。
用戶點擊某顏色，就在body加上class：custom-00a597
這樣通過body的class改變就能實現真正使用不同的css文件。

1.將css文件裏面加上特定的.XX類名比如

如顏色值爲#00a597的css文件，我裏面的每個選擇器都加上了.custom-00a597
顏色值爲#0000ff的css文件，加上了.custom-0000ff
怎麼批量加呢？
這裏使用gulp-css-wrap這個神器
具體細節請見另一篇博文：gulp-css-wrap工具的使用——[批量爲css文件擴展命名空間]
或者官方文檔：gulp
下面假裝你已經有了增加命名空間的各個主題css文件
2 app.vue裏引入全部的顏色文件
[當然也可以按需引入，動態的加載css]

//一個簡單的動態加載css的栗子
var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);

這裏我簡單粗暴地一次性完全載入：

3 用戶點擊某顏色，就在body加上class：custom-00a597
//類似於document.body.className = ‘custom-00a597’

思路大概如上，具體的細節如下：

1. Vue的elementUI實現自定義主題

使用vue開發項目，用到elementUI，根據官網的寫法，我們可以自定義主題來適應我們的項目要求
Element官網上也提供了自定義主題的方案
同時也提供了一個在線自定義主題的demo
按照官方文檔，我們可以有兩種辦法實現自定義換膚。
一.第一種方法：使用命令行主題工具
二.第二種方法：直接修改element樣式變量[前提是項目中使用scss編寫]
現在我做的這個項目用的是第一種，因爲第一種可以生成css文件，我們要在生成的css前面加各個類名。

1.1 使用命令行主題工具生成css文件

1.1.1 用vue-cli安裝一個新項目：

1.1.2 安裝elementUI及sass-loader,node-sass

(項目中使用scss編寫需要依賴的插件)

//安裝elementui
npm i element-ui -S
//安裝sass
npm i sass-loader node-sass -D

1.1.3 安裝elementui的自定義主題工具

//首先安裝主題工具
npm i element-theme -g

//然後安裝chalk主題
npm i element-theme-chalk -D

1.1.4 初始化變量文件

et -i [可以自定義變量文件，默認爲element-variables.scss]

> ✔ Generator variables file

這時根目錄下會產生element-variables.scss（或自定義的文件），大致如下：

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;

...

code is cheap ,show me the “截圖 ”

1.1.5 修改變量

直接編輯 element-variables.scss 文件，例如修改主題色爲自己所需要的顏色（如：紫色（purple））

$--color-primary: purple;

1.1.6 編譯主題

et

> ✔ build theme font
> ✔ build element theme

編譯完之後會在根目錄生成theme的文件夾

我們只需要引入theme/index.css即可

1.1.7 引入自定義主題

最後一步，將編譯好的主題文件引入項目（編譯的文件默認在根目錄下的theme文件下，也可以通過 -o 參數指定打包目錄），在入口文件main.js中引入

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

Vue.use(ElementUI)

1.1.8 測試是否改變成功

    <div>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </div>