經過iview-theme定製iView主題

iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品。項目搭建中，選用該組件庫時，可按以下方法設計個性化主題。

安裝iview-theme

npm i iview-theme -g

安裝iview

npm i iview

自定義主題變量

進入./node_modules/iview/src/styles/index.less文件，自定義主題變量：

主要設置兩個變量（@primary-color 、@link-color），設置以下：

如需設置更多的個性化主題，能夠進入更多less文件查看詳細變量，而後在index.less修改變量，覆蓋變量生成新主題

打包生成主題

cd ./node_modules/iview/src/styles
iview-theme build -o dist/

生成主題壓縮文件和字體

其餘建議

1.主題的顏色主要體如今基礎顏色、active狀態顏色、連接顏色，項目中若是須要切換某些文本主題，建議在文本外部加一個空連接標籤<a href="javascript:void(0)"></a>
2.本文裏連接了iview-theme的github地址，不過我的推薦按照本文中的方式生成主題，這樣的版本是最新的iview版本，iview不一樣版本默認主題色不太一致，甚至class命名會有很大改變。