時(shí)間過(guò)的真快，自從 1.1.4 發(fā)布又過(guò)去一個(gè)月了，這個(gè)月依舊每天在忙，D2Admin 也進(jìn)行了大重構(gòu)，先介紹一下這次的 1.1.5 相比 1.1.4 有哪些大的改變吧 ~

重要升級(jí)

vue-cli3

D2Admin 這次完成了 vue-cli3 的重構(gòu)，省去了以前繁瑣的 webpack 配置，打包速度更快，環(huán)境變量設(shè)置更簡(jiǎn)單，文件目錄更簡(jiǎn)潔。

d2-container 組件重構(gòu)

創(chuàng)建頁(yè)面最重要的 d2-container 組件進(jìn)行了重構(gòu)，詳見(jiàn) 頁(yè)面容器，依舊是支持 full + card + ghost 三種模式，不同的是三種模式現(xiàn)在都分別支持 header 和 footer 插槽，并且都支持開(kāi)關(guān)自定義滾動(dòng)條，并且提供了滾動(dòng)條設(shè)置的 props。

type="full"

type="card"

type="ghost"

在 頁(yè)面容器 文檔中我也分別為三種模式 x 是否有插槽 x 是否啟用滾動(dòng)條優(yōu)化的各種可能做了大量插圖介紹，歡迎去文檔站點(diǎn)查看。

在線(xiàn)示例（請(qǐng)先完成一次登陸）

• 布局容器

頁(yè)面緩存邏輯優(yōu)化

首先承認(rèn)一個(gè)錯(cuò)誤：在 1.1.4 中多標(biāo)簽頁(yè)的緩存邏輯是有一點(diǎn)問(wèn)題的，導(dǎo)致即使關(guān)閉了多頁(yè)控制組件的 tab，這個(gè)頁(yè)面依舊在緩存中。在 1.1.5 中重寫(xiě)了頁(yè)面緩存邏輯，這個(gè)錯(cuò)誤被修復(fù)。

開(kāi)放多標(biāo)簽頁(yè)控制

在 1.1.4 中，多頁(yè)控制的邏輯有些寫(xiě)在控制組件內(nèi)，有些寫(xiě)在 vuex 中，并且也沒(méi)有公布使用方式。在 1.1.5 中所有的頁(yè)面控制都重新組織后放入 vuex，并且給出了所有的文檔和示例，這意味著如果你有需要，可以隨意使用這些 API 控制多標(biāo)簽頁(yè)的打開(kāi)和關(guān)閉。

API作用

d2adminPageOpenNew	打開(kāi)新頁(yè)面
d2adminTagClose	關(guān)閉一個(gè)頁(yè)面
d2adminTagCloseLeft	關(guān)閉當(dāng)前頁(yè)左側(cè)頁(yè)面
d2adminTagCloseRight	關(guān)閉當(dāng)前頁(yè)右側(cè)頁(yè)面
d2adminTagCloseOther	關(guān)閉當(dāng)前頁(yè)除外的其它頁(yè)面
d2adminTagCloseAll	關(guān)閉所有頁(yè)面

詳見(jiàn) VUEX 實(shí)用工具

開(kāi)放菜單控制

在以前的版本中，菜單的數(shù)據(jù)切換是在主布局組件內(nèi)完成的，這就導(dǎo)致二次開(kāi)發(fā)時(shí)有很多朋友詢(xún)問(wèn)我應(yīng)該怎樣修改菜單的設(shè)置，針對(duì)這個(gè)問(wèn)題 1.1.5 新開(kāi)放了頂欄菜單和側(cè)邊欄菜單的控制 API：

API作用

d2adminMenuHeaderSet	設(shè)置頂欄菜單
d2adminMenuAsideSet	設(shè)置側(cè)邊欄菜單

舉個(gè)栗子，現(xiàn)在你可以這樣設(shè)置：

// 在任何地方 // menuHeader 是已經(jīng)處理好的菜單數(shù)據(jù) $store.commit('d2adminMenuHeaderSet', menuHeader) // 頂欄菜單更新完畢 復(fù)制代碼

就這么簡(jiǎn)單。

在線(xiàn)示例（請(qǐng)先完成一次登陸）

• 菜單控制

詳見(jiàn) VUEX 實(shí)用工具

cookie讀寫(xiě)包裝

API作用

util.cookies.set	設(shè)置 cookie
util.cookies.get	獲取 cookie
util.cookies.getAll	獲取所有的 cookie
util.cookies.remove	刪除 cookie

為什么不直接使用 cookie ？

util.cookies 內(nèi)部使用 js-cookie 進(jìn)行操作，并且在 cookie 名稱(chēng)上多做了一層邏輯封裝，例如

util.cookies.set({name: 'name',value: 'value',setting: {expires: 365} }) 復(fù)制代碼

實(shí)際存儲(chǔ)的 cookie 是

d2admin-${version}-name : value

使用

util.cookies.get('name') 復(fù)制代碼

實(shí)際取的也是 d2admin-${version}-name

最后你的 cookie 信息實(shí)際上可能類(lèi)似這樣（舉例）：

• d2admin-1.1.5-name : FairyEver
• d2admin-1.1.5-uuid : h8dsafy98du9f6yadsyf
• d2admin-1.1.5-token : dys87f89dsafy89adsh

這樣做的好處是可以保證如果您的 D2Admin 升級(jí)到了新版本，打開(kāi)時(shí)使用的數(shù)據(jù)一定是重新初始化的，而您在使用 cookie 時(shí)無(wú)論賦值還是取值，都覺(jué)察不出這層包裝

詳見(jiàn) Util 實(shí)用工具

數(shù)據(jù)持久化優(yōu)化

數(shù)據(jù)持久化現(xiàn)在給二次開(kāi)發(fā)提供了全新的 API

API作用

d2adminUtilVuex2DbByUuid	根據(jù)用戶(hù)區(qū)分 將 store 某個(gè)值持久化
d2adminUtilDb2VuexByUuid	根據(jù)用戶(hù)區(qū)分 將持久化的 store 某個(gè)值復(fù)原
d2adminUtilVuex2Db	所有用戶(hù)公用 將 store 某個(gè)值持久化
d2adminUtilDb2Vuex	所有用戶(hù)公用 將持久化的 store 某個(gè)值復(fù)原
d2adminUtilDatabaseUser	獲取當(dāng)前用戶(hù)的持久化區(qū)域
d2adminUtilDatabaseUserClear	清空當(dāng)前用戶(hù)的持久化區(qū)域
d2adminUtilDatabase	獲取所有用戶(hù)公用的持久化區(qū)域
d2adminUtilDatabaseClear	清空所有用戶(hù)公用的持久化區(qū)域

借助這些 API 可以做什么？

• 將 store 中的某項(xiàng)持久化，可以區(qū)分用戶(hù)，也可以不區(qū)分
• 隨意持久化任何數(shù)據(jù)，可以區(qū)分用戶(hù)存儲(chǔ)，也可以存儲(chǔ)成所有用戶(hù)共享

詳見(jiàn) VUEX 實(shí)用工具

在線(xiàn)示例（請(qǐng)先完成一次登陸）

• 用戶(hù)數(shù)據(jù)
• 公用數(shù)據(jù)

自動(dòng)收集用戶(hù)瀏覽器信息

不需要任何的操作，可以在 store 中獲得用戶(hù)的瀏覽器信息，數(shù)據(jù)格式示例：

{browser: {name: "Chrome",version: "67.0.3396.99",major: "67"},engine: {name: "WebKit",version: "537.36"},os: {name: "Mac OS",version: "10.13.4"},device: {},cpu: {} } 復(fù)制代碼

側(cè)邊欄控制

API作用

d2adminMenuAsideCollapseSet	設(shè)置側(cè)邊欄收縮還是展開(kāi)
d2adminMenuAsideCollapseToggle	切換側(cè)邊欄狀態(tài)

并且現(xiàn)在側(cè)邊欄的狀態(tài)會(huì)被自動(dòng)持久化存儲(chǔ)，也就是說(shuō)刷新瀏覽器后側(cè)邊欄會(huì)保持收縮或者展開(kāi)

快速上手章節(jié)

為了讓大家更簡(jiǎn)單地使用 D2Admin 搭建第一個(gè)頁(yè)面，新書(shū)寫(xiě)了“快速上手”章節(jié)，后續(xù)計(jì)劃會(huì)出一系列教程。

• 前置知識(shí)
• 準(zhǔn)備
• 下載項(xiàng)目
• 安裝環(huán)境
• 安裝依賴(lài)
• 開(kāi)發(fā)調(diào)試
• 新建頁(yè)面
• 設(shè)置路由
• 設(shè)置菜單
• 效果
• 資源

詳見(jiàn) 快速上手

其它的更新信息見(jiàn)下節(jié)

更新日志

• [ 修改 ] vue-cli3 項(xiàng)目重構(gòu)，目錄調(diào)整
• [ 修改 ] 全局狀態(tài)管理設(shè)計(jì)優(yōu)化
• [ 修改 ] 多標(biāo)簽頁(yè)操作全部轉(zhuǎn)移至 vuex
• [ 修改 ] 修復(fù)了多標(biāo)簽頁(yè)無(wú)法清除緩存的 bug
• [ 修改 ] bug fixed #38
• [ 修改 ] bug fixed #41
• [ 修改 ] 側(cè)邊欄和頂欄菜單數(shù)據(jù)控制轉(zhuǎn)移到 vuex 集中管理
• [ 修改 ] 頁(yè)面最小寬度設(shè)置
• [ 新增 ] d2-highlight 組件新增 format-html 參數(shù)
• [ 新增 ] 自動(dòng)獲取用戶(hù)瀏覽器 UA
• [ 新增 ] playground 新增瀏覽器信息查看界面
• [ 修改 ] 登陸注銷(xiāo)邏輯移至 vuex
• [ 新增 ] 登陸頁(yè)面新增快速選擇用戶(hù)示例
• [ 新增 ] 側(cè)邊欄切換控制輯移至 vuex
• [ 新增 ] 判斷手機(jī)瀏覽自動(dòng)跳轉(zhuǎn)至提示頁(yè)面
• [ 修改 ] 側(cè)邊欄彈出菜單尺寸縮小以容納更多菜單
• [ 修改 ] d2-container 組件重構(gòu)，每種模式現(xiàn)都支持 scroll 屬性以及 header footer 插槽
• [ 修改 ] 修復(fù)全屏按鈕退出全屏狀態(tài)不更新的 bug
• [ 修改 ] 修復(fù)多標(biāo)簽頁(yè)緩存邏輯 bug
• [ 新增 ] 持久化存儲(chǔ)根據(jù)系統(tǒng)版本區(qū)分?jǐn)?shù)據(jù)，防止因更新導(dǎo)致數(shù)據(jù)錯(cuò)亂
• [ 新增 ] 注銷(xiāo)畫(huà)面灰度效果
• [ 新增 ] .d2-card 樣式類(lèi)，可以讓 el-card 具有跟隨主題變化的樣式
• [ 新增 ] ElementUI 表格組件全部示例移植
• [ 新增 ] 全局狀態(tài)管理 playground
• [ 新增 ] 用戶(hù)私有持久化數(shù)據(jù) playground
• [ 新增 ] 側(cè)邊欄和頂欄菜單設(shè)置 playground
• [ 新增 ] d2-container 組件 card 模式下 footer 樣式優(yōu)化
• [ 修改 ] 側(cè)邊欄折疊模式下彈出菜單尺寸縮小
• [ 修改 ] 默認(rèn)取消了側(cè)邊欄的自定義滾動(dòng)條顯示
• [ 新增 ] cookie 讀寫(xiě)包裝
• [ 新增 ] 持久化存儲(chǔ)讀寫(xiě)包裝，提供快速操作當(dāng)前用戶(hù)數(shù)據(jù)的 mutation
• [ 新增 ] 持久化存儲(chǔ)讀寫(xiě)包裝，提供快速操作所有用戶(hù)共享數(shù)據(jù)的 mutation
• [ 新增 ] 側(cè)邊欄折疊狀態(tài)現(xiàn)在會(huì)根據(jù)用戶(hù)區(qū)分記錄，刷新頁(yè)面保留之前的狀態(tài)

一些額外的事

被 "借鑒" 總是不愉快的

總結(jié)

首先感謝那些給我提出意見(jiàn)以及給我?guī)椭呐笥?#xff08;包括精神鼓勵(lì)還有紅包鼓勵(lì)），大家的 star 也是對(duì)我的鼓勵(lì)。

在一個(gè)人精力有限的前提下，我會(huì)盡量吧 D2Admin 做的更好，現(xiàn)在只能承諾給大家：該有的以后都會(huì)有，這個(gè)項(xiàng)目會(huì)一直用心做下去，并且以后給大家比較驚喜的更新。

關(guān)于接下來(lái)的計(jì)劃還有正在進(jìn)行的其它計(jì)劃，暫時(shí)還要保密，敬請(qǐng)期待吧！

既然做了，就要好好做，還要做好。

項(xiàng)目地址

地址描述

團(tuán)隊(duì)主頁(yè)	D2Admin 所屬的團(tuán)隊(duì)主頁(yè)
中文文檔	中文文檔
完整版 預(yù)覽地址	完整版 預(yù)覽地址
完整版 github	完整版 Github 倉(cāng)庫(kù)
完整版 碼云	完整版 碼云鏡像倉(cāng)庫(kù)
簡(jiǎn)化版 預(yù)覽地址	簡(jiǎn)化版 預(yù)覽地址
簡(jiǎn)化版 github	簡(jiǎn)化版 Github 倉(cāng)庫(kù)
簡(jiǎn)化版 碼云	簡(jiǎn)化版 碼云鏡像倉(cāng)庫(kù)

在最后，如果你看完了，并且覺(jué)得還不錯(cuò)，希望可以到 項(xiàng)目主頁(yè) 上點(diǎn)一個(gè) star 作為你對(duì)這個(gè)項(xiàng)目的認(rèn)可與支持，謝謝。

我的個(gè)人微信公眾號(hào)：

轉(zhuǎn)載于:https://juejin.im/post/5b5e5d3b6fb9a04f9244586d

總結(jié)

以上是生活随笔為你收集整理的D2Admin 7月份更新内容：cli3以及更方便的全局控制等的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。