基於ElementUI的網站換主題的一些思考與實現

前言

web應用程序，切換主題，給其換膚，是一個比較常見的需求。

• 如何能快速的切換主題色？(只有固定的一種皮膚)
• 若是又想把主題色切換爲之前的呢？（有多種可切換的皮膚）
• 該以何種方式編寫標籤的css屬性？

快速切換主題這個需求，它考驗了項目的CSS代碼，是否具備可維護性、可擴展性。
css要如何編寫，才能達到這兩點呢，我還在研究學習當中，能夠參考在大型項目中組織CSS。
原本，此文想寫這個的，發現道行不夠(┬＿┬)，我仍是寫如何實現的，比較好。

想要換主色調，其實就是換一種風格樣式，最終都是換css。
我看目前比較流行的幾種切換主題的方式：

• 全部樣式的css模版都在項目中，根據條件，給body添加class，經過不一樣的class來顯示不一樣的樣式。
• 經過引用不一樣的link文件，達到效果。
• ElementUI的這種方式，詳情見ISSUE
  （1） 先把默認主題文件中涉及到顏色的 CSS 值替換成關鍵詞
  （2） 根據用戶選擇的主題色生成一系列對應的顏色值
  （3） 把關鍵詞再換回剛剛生成的相應的顏色值
  （4） 直接在頁面上加 style 標籤，把生成的樣式填進去

我目前用的是第一種方式，把操做過程記錄下來，方便之後查看。

如何增長主題文件-具體操做過程

說明：此項目UI是在elementUI基礎上創建的，因此，咱們能夠經過element提供的方法，來自定義主題。

生成自定義主題文件

使用工具下載自定義主題文件，並命名爲wq-variables.css。之後咱們若是想要增長主題文件，只須要修改變量文件中各個變量所對應的值。

編譯主題

咱們利用工具來編譯主題。
在終端，將剛剛修改好的變量文件，經過命令node_modules/.bin/et -c wq-variables.css來編譯主題。

給自定義主題增長命名空間

默認狀況下，編譯的主題目錄會放在./theme下。因爲，咱們是經過改變css的命名空間來切換主題的，那麼，咱們就須要爲剛生成的主題增長命名空間。主題文件內容不少，若是手動一個個添加命名空間，工做量巨大，這個時候，可使用另外一個給css增長命名空間的工具。下載這個項目，而後只須要修改gulpfile.js文件中3處內容，就能夠獲得想要的內容，這裏注意，本項目css自定義的命名空間統一爲custom-******,其中******建議使用主題色的16進制編碼,也可使用其餘字符串，可是要和radio標籤統一。

引用自定義主題

自定義主題文件，已經有了，只剩下如何引入使用了。

• 在App.vue中import新增的主題樣式（這個也能夠寫在topbar.vue文件中，到底哪一種好些，我也不清楚）
• 在./src/components/nav/topbar/topbar.vue中，添加對應的radio標籤
  通過以上兩步，就能夠正常使用了。

如何處理與自定義主題不一樣部分的樣式

能夠新建一個css文件，而後在其中編寫樣式，以後在入口文件引入就ok了。

具體效果，可查看於此網站：
http://weiqinl.com/vue-element-admin/

此作法參考於：
基於Element的動態換膚