css 1张页面3套皮肤,Vue.js项目更换皮肤，同时支持多套皮肤

一个vue.js的项目，另一个人想要买过去，但是需要换一下风格。

一、需求

换的东西不多，主要包括：

1、主色调：原来是紫色，需要换成浅蓝色

2、logo、一些背景色

3、一些操作按钮的颜色

4、一些menu和小图片

二、分析

1、后台逻辑和javascript逻辑上均没有改动，都是html、css层面的东西

2、此项目后续还要开发新功能

所以，方案是基于一套代码做切换。

三、开工

1、首先在App.vue中加了一个变量，用来判断当前是哪个风格

data(){

return{

//true/false分别代表两种风格，其实用字符串比较科学，方便后续再扩展，但是考虑true/false比较方便，而且目测也没有第三个买家，所以，偷懒了一下

ccstyle=true,

}

}

2、根据ccstyle的不同，加载不同的css文件

其中purple和lightblue就是本文的两种风格了

mounted: function () {

if (this.ccstyle) {

require('./assets/public/css/base-lightblue.css')

} else {

require('./assets/public/css/base-purple.css')

}

},

原来只有一个css文件main.css文件，现在拆分成三个，main.css里面放公共的，另外两个只放两种风格中不同的：

main.css

base-lightblue.css

base-purple.css

3、关于主色调的处理

因为是主色调，所以项目中大量使用到，为了防止硬编码，所以采用了css的变量

分别在两个css中定义不同的主色调--maincolor

//这个是base-purple.css

:root{

--maincolor:#9966ff;

}

//这个是base-lightblue.css

:root{

--maincolor:#7dc2df;

}

然后其他地方在使用的时候，直接用var(--maincolor)即可，这样以后如果改主色调，也是只在定义的地方修改就好了，非常的方便

background-color: var(--maincolor);

border: 1px solid var(--maincolor);

4、background-image的处理

这种很简单，我直接在photoshop里面把紫色图片批量替换成蓝色。。然后放两套图片在两个目录下。

两个css种分别写一下路径即可(只需要更换文件夹)

//这个是base-purple.css

.ad-icon-financial{

background: url(../icon/purple/test.png) no-repeat 0 6px;

}

//这个是base-lightblue.css

.ad-icon-financial{

background: url(../icon/lightblue/test.png) no-repeat 0 6px;

}

5、的处理

因为是换皮肤，这种一般是没有的，但是，但是，我这次也遇到了。

因为是老项目，前面程序员也是偷懒，本应该使用background-image的，也用了img标签了。

这种我的方法是直接全部替换成background-image，然后用上面的方式处理。

当然那有的地方必须要用img，那也不难，判断ccstyle，然后拼接src的字符串就可以了，比如我对logo的处理。

四、完成

两个风格用一个变量就可以来回切换了，如果你想支持在线切换，在界面加一个toggle就可以切换，我没这个需要所以没做这个。

就这样，换皮肤任务就这样就over了，恩easy嘛，哈哈。