vue-基于elementui换肤[自定义主题]

前言：
这篇文章记录换肤的两个方面：
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文件后，我们怎么实现动态切换呢？
我的办法是：

1. 生成不同的css颜色文件，每个文件内部命名前加上.custom-颜色值做命名空间。
2. 然后app.vue里引入全部的颜色文件。
3. 用户点击某颜色，就在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官网上也提供了自定义主题的<