Vue-换肤实践

2018-08-26 本文已影响289人北暖37

应产品的要求，做人生中的第一次换肤项目，在没做之前，确实觉得挺没有头绪的，所以就只能借助于百度啊，然后发现其实element自带的就有换肤功能，虽然看了很多别人的文章，但是想自己写一下加深印象。

参考链接

一、项目搭建

第一步肯定是根据命令行生成对应的项目框架，然后安装element，根据需求引入自己需要的element组件最后拿到的效果图如图

图1

二、换肤思路

搭建好了项目以后，最重要的问题就来了，如何实现换肤呢。其实主要的还是依赖于element里面的知识：vue , elementui , vuex , sass , gulp-css-wrap，根据gulp工具进行生成对应颜色的css文件，然后通过点击不同的颜色进行link 来引入css文件

三、实现

1、之前已经有了对于element的一些基本安装，步骤如下

//安装elementui

npm i element-ui -S

//安装sass

npm i sass-loader node-sass -D

2、然后需要安装element自定义颜色主题工具

//安装主题工具

npm i element-theme -g

//安装chalk工具

npm i element-theme-chalk -D

3、初始化变量文件

et -i

Generator variables file

执行后当前目录会有一个 element-variables.scss 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：

图2

4、修改变量，直接编辑 element-variables.scss 文件，例如修改主题色为红色。

$--color-primary: red;

5、编译主题

保存文件后，到命令行里执行 et 编译主题，默认情况下编译的主题目录是放在 ./theme 下

et

> ✔ build theme font

> ✔ build element theme

图3

图4

6、生成需要的文件统一放到文件夹下，如图

图5

7、在使用的时候，动态的改变引入的link文件之前，需要把你需要使用的文件放到数组中

如图

图6

8、然后就是对应的，通过动态改变link内容进行引入

图7

图8