vue-基于elementui换肤

思路：

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这个神器 

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: purple

7、编译主题

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 

效果