一个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、<img />的处理
因为是换皮肤,这种一般是没有的,但是,但是,我这次也遇到了。
因为是老项目,前面程序员也是偷懒,本应该使用background-image的,也用了img标签了。
这种我的方法是直接全部替换成background-image,然后用上面的方式处理。
当然那有的地方必须要用img,那也不难,判断ccstyle,然后拼接src的字符串就可以了,比如我对logo的处理。
<img class="logo" v-if="this.$parent.ccstyle" src="../../assets/public/iocn/cclogo.png" />
<img class="logo" v-else="" src="../../assets/public/iocn/logo.png" width="180" />
四、完成
两个风格用一个变量就可以来回切换了,如果你想支持在线切换,在界面加一个toggle就可以切换,我没这个需要所以没做这个。
就这样,换皮肤任务就这样就over了,恩easy嘛,哈哈