思路：
- 生成不同的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这个神器
2、gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
1.搭建gulp环境
搭建环境在项目的代码环境中搭建。
//1.安装gulp：
npm install gulp
//2.安装gulp-clean-css
npm install gulp-clean-css
//3.安装gulp-css-wrap
npm install gulp-css-wrap
2.在项目根目录下创建一个名为 gulpfile.js 的文件：
// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
return gulp.src(path.resolve('./theme/index.css'))
/* 找需要添加命名空间的css文件，支持正则表达式 */
.pipe(cssWrap({
selector: '.custom-1b1e24' /* 添加的命名空间 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest('src/assets/css/theme/1b1e24')) /* 存放的目录 */
})
3.执行gulp输出
//命令行
gulp css-wrap
3、 使用命令行主题工具生成css文件
1、使用命令行主题工具生成css文件
2、 用vue-cli安装一个新项目：
3、 安装elementUI及sass-loader,node-sass
(项目中使用scss编写需要依赖的插件)
//安装elementui
npm i element-ui -S
//安装sass
npm i sass-loader node-sass -D
4、 安装elementui的自定义主题工具
//首先安装主题工具
npm i element-theme -g
//然后安装chalk主题
npm i element-theme-chalk -D
5、 初始化变量文件
et -i [可以自定义变量文件，默认为element-variables.scss]
这时根目录下会产生element-variables.scss（或自定义的文件）
6、修改变量
直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如： 紫色（purple））
$--color-primary: purple7、编译主题
et
编译完之后会在根目录生成theme的文件夹.
只需要引入theme/index.css即可
8、引入自定义主题
将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
9、测试是否成功
<el-button type="primary">主要按钮</el-button>
4、动态切换主题
1、将修改好的不同css颜色文件放到一个文件夹
1、换肤内容
5、动态切换逻辑
当前颜色值存在vuex里。修改或拿取都通过vuex管理
用户点击颜色值v-model绑定
app.vue 引入common.scss
效果
