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

前言：
这篇文章记录换肤的两个方面：
1.基于elementui这个ui框架的换肤
2.在vue项目里自己写的内容的换肤
所用知识：
vue , elementui , vuex , sass , gulp-css-wrap

首行祭图：

码云地址： https://gitee.com/YOUNG_xy/vue-theme-demo.git
思路在此：
改变原有的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官网上也提供了自定义主题的方案
同时也提供了一个在线自定义主题的demo
按照官方文档，我们可以有两种办法实现自定义换肤。
一.第一种方法：使用命令行主题工具
二.第二种方法： 直接修改element样式变量[前提是项目中使用scss编写]
现在我做的这个项目用的是第一种，因为第一种可以生成css文件，我们要在生成的css前面加各个类名。

1.1 使用命令行主题工具生成css文件

1.1.1 用vue-cli安装一个新项目：

1.1.2 安装elementUI及sass-loader,node-sass

(项目中使用scss编写需要依赖的插件)

//安装elementuinpm i element-ui -S//安装sassnpm i sass-loader node-sass -D

1.1.3 安装elementui的自定义主题工具

//首先安装主题工具npm i element-theme -g

//然后安装chalk主题npm i element-theme-chalk -D

1.1.4 初始化变量文件

et -i [可以自定义变量文件，默认为element-variables.scss]> ✔ Generator variables file

这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：

$--color-primary: #409EFF !default;$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */$--color-success: #67c23a !default;$--color-warning: #eb9e05 !default;$--color-danger: #fa5555 !default;$--color-info: #878d99 !default;...

code is cheap ,show me the “截图 ”

1.1.5 修改变量

直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如： 紫色（purple））

$--color-primary: purple;

1.1.6 编译主题

et> ✔ build theme font> ✔ build element theme

编译完之后会在根目录生成theme的文件夹

我们只需要引入theme/index.css即可

1.1.7 引入自定义主题

最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入

import '../theme/index.css'import ElementUI from 'element-ui'import Vue from 'vue'Vue.use(ElementUI)

1.1.8 测试是否改变成功

    <div>      <el-button>默认按钮</el-button>      <el-button type="primary">主要按钮</el-button>      <el-button type="success">成功按钮</el-button>      <el-button type="info">信息按钮</el-button>      <el-button type="warning">警告按钮</el-button>      <el-button type="danger">危险按钮</el-button>    </div>

以上便是完成了第一步生成不同的css颜色文件。
然后我们要在不同的css文件里扩展命令空间

1.2 不同的css文件里的每个元素外面包裹一个独特的class名字

方法：使用gulp-css-wrap神器
具体使用见另一篇博文：gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
打广告X2 【逃
这里让我们快进到已经生成好的那一步[就像美食节目做菜一秒快进到熟的感觉]

1.3 动态切换

1.3.1 将修改好的不同css颜色文件放到一个文件夹里

我下面的common.scss是用于自己写的内容的换肤。这个之后再讲

1.3.2 动态切换逻辑：

1. 当前颜色值存在vuex里。修改或拿取都通过vuex管理
   

2.用户点击颜色值v-model绑定

即是对应页面的这里：

3. 刚开始载入的时候主题色是vuex的默认值
watch颜色值的改变，一旦改变就调用vuex的函数

2. Vue的自定义内容实现主题颜色切换

思路：
1.与生成各个颜色不同的css文件类似，我们对应不同的主题定义不同的css，只不过可以用sass解决。
mixi.scss 定义的五个主题颜色

common.scss

2. app.vue 引入common.scss

3.然后同样的动态切换class名字

参考链接：

手摸手，带你用vue撸后台 系列三(实战篇)

vue移动助手实践（一）——基于vue的换肤功能

基于ElementUI的网站换主题的一些思考与实现

Vue的elementUI实现自定义主题

换肤问题有没有解决方案