iview_blackuiIView 暗黑風(fēng)格主題構(gòu)建工具

iview_blackui 是一個(gè) IView 暗黑風(fēng)格主題構(gòu)建工程，由于 IView 本身的主題配置方案還是基于白色底色為主，需要配置出暗黑系的主題風(fēng)格還是比較麻煩的。

本工程默認(rèn)已經(jīng)配置好了暗黑色系的風(fēng)格主題，覆蓋IView的所有組件，目前只實(shí)現(xiàn)了iview3.x的暗黑風(fēng)格配置，4.x后續(xù)會更新。

工程截圖：

軟件架構(gòu)

• 基于vue-cli構(gòu)建的基于vue2.x的工程項(xiàng)目
• 使用iview官方推薦的iview-theme工具進(jìn)行皮膚源碼的初始化與打包構(gòu)建

安裝教程

運(yùn)行如下命令安裝相關(guān)依賴包并啟動項(xiàng)目，如果您只需要構(gòu)建出皮膚的CSS樣式文件，可以直接調(diào)到使用說明

// 安裝依賴包
yarn install

// 啟動工程
yarn serve

注意：啟動過程有可能會因?yàn)楸镜匕惭b的node版本過高（12+）造成啟動異常，建議使用nvm安裝node 11.15.0，然后切換使用的node版本再進(jìn)行啟動。

使用說明

1. 工程已經(jīng)默認(rèn)創(chuàng)建暗黑風(fēng)格的主題源碼，位于目錄src/assets下的black_3x文件夾中，如果有其他配置需要，可以直接編輯custom.less文件中的相關(guān)變量，

2. 打包主題：命令行工具進(jìn)入black_3x目錄，運(yùn)行如下命令進(jìn)行主題的打包

iview-theme build -o dist/

• 注意：如果在打包中報(bào)如下錯誤

fs.js:36
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:36:5
    at req_ (/Users/huangjian/.config/yarn/global/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/huangjian/.config/yarn/global/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/huangjian/.config/yarn/global/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)

說明你的node版本過高，可以使用nvm安裝11.15.0版本的node（nvm可以進(jìn)行node的多版本管理，具體使用方法請前往：https://www.runoob.com/w3cnote/nvm-manager-node-versions.html 查閱）

參考資料

1. iview3.x官網(wǎng)：http://v3.iviewui.com/docs/guide/theme

友情連接

本項(xiàng)目由PageNow數(shù)據(jù)可視化技術(shù)團(tuán)隊(duì)開發(fā)，PageNow官網(wǎng)：http://www.pagenow.cn/