VUE項目動態切換皮膚/主題的通用實現方式
提供一種通用的的解決方案，無需重啓項目，無需更改import的文件路徑，直接通過功能按鈕熱更換皮膚/主題
vue-cli版本：3.0
1. 在pulic目錄下創建skin目錄，新建day.css和night.css兩個主題樣式文件，並在其中聲明css變量
day.css
/*日間模式*/
:root {
--bgColor: white;
--fontColor: black;
}
night.css
/*日間模式*/
:root {
--bgColor: black;
--fontColor: white;
}
2. 找到index.html總入口文件，使用link標籤引入css文件
在這裏引入的樣式即全局樣式，所有子組件可以直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--皮膚-->
<link id="skin" rel="stylesheet" type="text/css" href="/skin/day.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
3. 爲項目中的換膚按鈕綁定換膚事件，傳入不同的參數，從而動態改變link標籤的href屬性
// type爲night或者day
changeSkin (type) {
// 節流防止瘋狂點擊
if (change) {
clearTimeout(change)
}
let change = setTimeout(() => {
document.head.querySelector('#skin').setAttribute('href', `/skin/${type}.css`)
}, 100)
}
4. 在需要控制皮膚樣式的組件中，直接使用night.css或者day.css中聲明的全局變量即可
.content-xxxx {
background-color: var(--bgColor);
color: var(--fontColor);
}
注意：一般的換膚業務中，night.css與day.css中的變量名稱與數量應該相同，具體的樣式根據主題風格進行各自定義，
想要添加其他風格，新增xxx.css主題文件，然後在換膚按鈕那裏動態傳參即可。
以上,即實現了皮膚/主題的動態切換。並且將各種樣式抽離爲獨立的變量實現解耦。避免了使用class造成全局與局部class衝突的問題以及class中多個樣式在不同主題間細微調整時的維護困難問題。