vue+element 多种主题切换

在公司负责平台的总体架构，领导要求可以借助element实现多种主题切换，研究了一下，记录一下：

一、安装 element-theme

npm i element-theme -g

二、安装element-theme-chalk

npm i element-theme-chalk -d

三、执行命令（执行完根目录下会产生element-variables.scss）

et -i

    默认scss名称是element-variables.scss，如果想自定义，执行下面的命令

et -i xxx.scss

四、更改想要修改配色的值，保存

五、执行命令 et (执行完主目录下生成theme的文件夹)

et  // 执行命令

    如果执行 et -i 生成的文件名称是自定义的，那么执行

et -c xxx.scss

六、安装 gulp、gulp-clean-css、gulp-css-wrap

npm i gulp gulp-clean-css gulp-css-wrap -d

七、在跟目录创建gulpfile.js文件，内容：

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')

var customThemeName = '.theme-default' // 名称随便改，改成什么最后生成的css文件中每个样式前面加上该名称的前缀
gulp.task('default', function() {
    return gulp.src( path.resolve('./index.css'))  // 准备加前缀的css文件位置
    .pipe(cssWrap({selector: customThemeName}))
    .pipe(cleanCSS()).pipe(gulp.dest('dist'))  // 执行后生成的文件名称
})

八、执行命令(执行完会在主目录下生成dist文件夹，文件夹中有index.css文件)

gulp

九、在vue项目中src下创建一个styles文件夹，将执行完 et 生成的theme文件夹中font文件夹放到styles文件夹中

十、将执行完 gulp 生成的dist文件夹中index.css文件放到styles文件夹中

十一、在styles文件夹中新建common.scss文件，文件中配置引入 gulp 生成的文件(自己改名)

@import "./theme-default.css";  // 我将gulp 生成的文件名称改为 theme-default.css

十二、在main.js引入common.scss

// 公用样式
import "./styles/common.scss"

十三、利用给document.body添加样式来切换主题

removeClass(document.body, "theme-black");
addClass(document.body, "theme-default");

export const removeClass = (ele, cls) => {
    if (hasClass(ele, cls)) {
        const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
        ele.className = ele.className.replace(reg, ' ')
    }
}

export const addClass = (ele, cls) => {
    if (!hasClass(ele, cls)) ele.className += ' ' + cls
}