vue element ui 切换肤色

  本文章主要是做得一个用VUE构建的项目实现切换风格肤色的功能

1. 安装vue-cli    

    npm install -g vue-cli

    vue init webpack vue_demo

     cd  vue_demo

     npm install npm run dev

2.安装element-ui及sass

npm i element-ui -S

npm install --save-dev sass-loader

npm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加(查看)配置

{

test: /\.sass$/, loaders: ['style', 'css', 'sass']

}

3. 安装elementui的自定义主题工具  

    npm i element-theme -g

    npm i element-theme-chalk -D

4.初始化变量文件

 et -i element-variables.scss

5. 这时根目录下会产生element-variables.scss

 

 

6.编译主题   

更改primary的值之后一定要  命令行输入et

7.编译完成之后在主目录下生成theme的文件夹（此文件下的fonts以后有用）

编译完成之后会生成them文件  

 

 

8.在main.js的入口文件中引入   

import '../theme/index.css'

到此已经可以实现颜色切换功能了

9.使用gulp-css-wrap神器

npm install gulp

npm install gulp-clean-css

npm install gulp-css-wrap

10.在项目根目录下创建一个名为 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-02abfd' /* 添加的命名空间 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */
})

custom-02abfd中的02abfd即为刚才生成自定义主题时的颜色

11. 执行gulp输出

gulp css-wrap

12.生成theme文件夹下的主题名称

 

 

此时文件夹下没有fonts文件夹，把生成主题时生成的fonts复制到此处即可

13.建立store文件存储主题状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
state:{
themecolor:'20a0ff'//默认为20a0ff
},
mutations:{
//更新主题颜色
setThemeColor(state,curcolor){
this.state.themecolor = curcolor;
}
}
});
export default store;

在main.js入口文件中引用

import store from './vuex/store.js';

import './assets/css/theme/02abfd/index.css';

14.