應產(chǎn)品的要求，做人生中的第一次換膚項目，在沒做之前，確實覺得挺沒有頭緒的，所以就只能借助于百度啊，然后發(fā)現(xiàn)其實element自帶的就有換膚功能，雖然看了很多別人的文章，但是想自己寫一下加深印象。
參考鏈接
http://element.eleme.io/#/zh-CN/component/custom-theme
一、項目搭建
? ? ? ? 第一步肯定是根據(jù)命令行生成對應的項目框架，然后安裝element，根據(jù)需求引入自己需要的element組件最后拿到的效果圖如圖
二、換膚思路
? ? ? ? 搭建好了項目以后，最重要的問題就來了，如何實現(xiàn)換膚呢。其實主要的還是依賴于element里面的知識：vue , elementui , vuex , sass , gulp-css-wrap，根據(jù)gulp工具進行生成對應顏色的css文件，然后通過點擊不同的顏色進行l(wèi)ink 來引入css文件
三、實現(xiàn)
1、之前已經(jīng)有了對于element的一些基本安裝，步驟如下
//安裝elementui
npm i element-ui -S
//安裝sass
npm i sass-loader node-sass -D
2、然后需要安裝element自定義顏色主題工具
//安裝主題工具
npm i element-theme -g
//安裝chalk工具
npm i element-theme-chalk -D
3、初始化變量文件
et -i
Generator variables file
執(zhí)行后當前目錄會有一個?element-variables.scss?文件。內(nèi)部包含了主題所用到的所有變量，它們使用 SCSS 的格式定義。大致結(jié)構如下：
4、修改變量，直接編輯?element-variables.scss?文件，例如修改主題色為紅色。
$--color-primary: red;
5、編譯主題
保存文件后，到命令行里執(zhí)行?et?編譯主題，默認情況下編譯的主題目錄是放在?./theme?下
et
> ? build theme font
> ? build element theme
6、生成需要的文件統(tǒng)一放到文件夾下，如圖
7、在使用的時候，動態(tài)的改變引入的link文件之前，需要把你需要使用的文件放到數(shù)組中
如圖
8、然后就是對應的，通過動態(tài)改變link內(nèi)容進行引入
