一個(gè)vue.js的項(xiàng)目姐直，另一個(gè)人想要買過去，但是需要換一下風(fēng)格蒋畜。
一声畏、需求
換的東西不多，主要包括：
1姻成、主色調(diào)：原來是紫色插龄，需要換成淺藍(lán)色
2、logo科展、一些背景色
3均牢、一些操作按鈕的顏色
4、一些menu和小圖片
二才睹、分析
1膨处、后臺(tái)邏輯和javascript邏輯上均沒有改動(dòng)见秤，都是html砂竖、css層面的東西
2真椿、此項(xiàng)目后續(xù)還要開發(fā)新功能
所以，方案是基于一套代碼做切換乎澄。
三突硝、開工
1、首先在App.vue中加了一個(gè)變量置济，用來判斷當(dāng)前是哪個(gè)風(fēng)格
data(){
return{
//true/false分別代表兩種風(fēng)格解恰，其實(shí)用字符串比較科學(xué)，方便后續(xù)再擴(kuò)展浙于，但是考慮true/false比較方便护盈，而且目測(cè)也沒有第三個(gè)買家，所以羞酗，偷懶了一下
ccstyle=true,
}
}
2腐宋、根據(jù)ccstyle的不同，加載不同的css文件
其中purple和lightblue就是本文的兩種風(fēng)格了
mounted: function () {
if (this.ccstyle) {
require('./assets/public/css/base-lightblue.css')
} else {
require('./assets/public/css/base-purple.css')
}
},
原來只有一個(gè)css文件main.css文件檀轨，現(xiàn)在拆分成三個(gè)胸竞，main.css里面放公共的，另外兩個(gè)只放兩種風(fēng)格中不同的：
main.css
base-lightblue.css
base-purple.css
3参萄、關(guān)于主色調(diào)的處理
因?yàn)槭侵魃{(diào)卫枝，所以項(xiàng)目中大量使用到，為了防止硬編碼讹挎，所以采用了css的變量
分別在兩個(gè)css中定義不同的主色調(diào)--maincolor
//這個(gè)是base-purple.css
:root{
--maincolor:#9966ff;
}
//這個(gè)是base-lightblue.css
:root{
--maincolor:#7dc2df;
}
然后其他地方在使用的時(shí)候校赤，直接用var(--maincolor)即可，這樣以后如果改主色調(diào)筒溃，也是只在定義的地方修改就好了马篮，非常的方便
background-color: var(--maincolor);
border: 1px solid var(--maincolor);
4、background-image的處理
這種很簡(jiǎn)單铡羡，我直接在photoshop里面把紫色圖片批量替換成藍(lán)色积蔚。。然后放兩套圖片在兩個(gè)目錄下烦周。
兩個(gè)css種分別寫一下路徑即可（只需要更換文件夾）
//這個(gè)是base-purple.css
.ad-icon-financial{
background: url(../icon/purple/test.png) no-repeat 0 6px;
}
//這個(gè)是base-lightblue.css
.ad-icon-financial{
background: url(../icon/lightblue/test.png) no-repeat 0 6px;
}
5尽爆、<img />的處理
因?yàn)槭菗Q皮膚，這種一般是沒有的读慎，但是漱贱，但是，我這次也遇到了夭委。
因?yàn)槭抢享?xiàng)目幅狮，前面程序員也是偷懶，本應(yīng)該使用background-image的，也用了img標(biāo)簽了崇摄。
這種我的方法是直接全部替換成background-image擎值，然后用上面的方式處理。
當(dāng)然那有的地方必須要用img逐抑，那也不難鸠儿，判斷ccstyle，然后拼接src的字符串就可以了厕氨，比如我對(duì)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" />
四、完成
兩個(gè)風(fēng)格用一個(gè)變量就可以來回切換了命斧，如果你想支持在線切換田晚，在界面加一個(gè)toggle就可以切換，我沒這個(gè)需要所以沒做這個(gè)国葬。
就這樣贤徒，換皮膚任務(wù)就這樣就over了，恩easy嘛胃惜，哈哈泞莉。
