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

转自young_Emily的博客

https://blog.csdn.net/young_Emily/article/details/78591261

目录(?)[+]

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

首行祭图： 
 
源码地址： https://github.com/EmilyYoung71415/vue-admin-elementui 
思路在此： 
改变原有的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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7

这里我简单粗暴地一次性完全载入： 

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编写需要依赖的插件)

//安装elementui
npm i element-ui -S
//安装sass
npm i sass-loader node-sass -D

• 1
• 2
• 3
• 4

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

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

• 1
• 2

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

• 1
• 2

1.1.4 初始化变量文件

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

> ✔ Generator variables file

• 1
• 2
• 3

这时根目录下会产生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;

...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

code is cheap ,show me the “截图 ” 

1.1.5 修改变量

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

$--color-primary: purple;

• 1

1.1.6 编译主题

et

> ✔ build theme font
> ✔ build element theme

• 1
• 2
• 3
• 4

编译完之后会在根目录生成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
• 2
• 3
• 4
• 5

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

以上便是完成了第一步生成不同的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实现自定义主题

换肤问题有没有解决方案

young_Emily的博客

目录(?)[+]

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

首行祭图： 
 
源码地址： https://github.com/EmilyYoung71415/vue-admin-elementui 
思路在此： 
改变原有的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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7

这里我简单粗暴地一次性完全载入： 

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编写需要依赖的插件)

//安装elementui
npm i element-ui -S
//安装sass
npm i sass-loader node-sass -D

• 1
• 2
• 3
• 4

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

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

• 1
• 2

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

• 1
• 2

1.1.4 初始化变量文件

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

> ✔ Generator variables file

• 1
• 2
• 3

这时根目录下会产生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;

...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

code is cheap ,show me the “截图 ” 

1.1.5 修改变量

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

$--color-primary: purple;

• 1

1.1.6 编译主题

et

> ✔ build theme font
> ✔ build element theme

• 1
• 2
• 3
• 4

编译完之后会在根目录生成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
• 2
• 3
• 4
• 5

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

以上便是完成了第一步生成不同的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实现自定义主题

换肤问题有没有解决方案