時間過的真快，自從 1.1.4 發布又過去一個月了，這個月依舊每天在忙，D2Admin 也進行了大重構，先介紹一下這次的 1.1.5 相比 1.1.4 有哪些大的改變吧 ~

重要升級

vue-cli3

D2Admin 這次完成了 vue-cli3 的重構，省去了以前繁瑣的 webpack 配置，打包速度更快，環境變量設置更簡單，文件目錄更簡潔。

d2-container 組件重構

創建頁面最重要的 d2-container 組件進行了重構，詳見 頁面容器，依舊是支持 full + card + ghost 三種模式，不同的是三種模式現在都分別支持 header 和 footer 插槽，并且都支持開關自定義滾動條，并且提供了滾動條設置的 props。

type="full"

type="card"

type="ghost"

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

在線示例（請先完成一次登陸）

• 布局容器

頁面緩存邏輯優化

首先承認一個錯誤：在 1.1.4 中多標簽頁的緩存邏輯是有一點問題的，導致即使關閉了多頁控制組件的 tab，這個頁面依舊在緩存中。在 1.1.5 中重寫了頁面緩存邏輯，這個錯誤被修復。

開放多標簽頁控制

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

API作用

d2adminPageOpenNew	打開新頁面
d2adminTagClose	關閉一個頁面
d2adminTagCloseLeft	關閉當前頁左側頁面
d2adminTagCloseRight	關閉當前頁右側頁面
d2adminTagCloseOther	關閉當前頁除外的其它頁面
d2adminTagCloseAll	關閉所有頁面

詳見 VUEX 實用工具

開放菜單控制

在以前的版本中，菜單的數據切換是在主布局組件內完成的，這就導致二次開發時有很多朋友詢問我應該怎樣修改菜單的設置，針對這個問題 1.1.5 新開放了頂欄菜單和側邊欄菜單的控制 API：

API作用

d2adminMenuHeaderSet	設置頂欄菜單
d2adminMenuAsideSet	設置側邊欄菜單

舉個栗子，現在你可以這樣設置：

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

就這么簡單。

在線示例（請先完成一次登陸）

• 菜單控制

詳見 VUEX 實用工具

cookie讀寫包裝

API作用

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

為什么不直接使用 cookie ？

util.cookies 內部使用 js-cookie 進行操作，并且在 cookie 名稱上多做了一層邏輯封裝，例如

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

實際存儲的 cookie 是

d2admin-${version}-name : value

使用

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

實際取的也是 d2admin-${version}-name

最后你的 cookie 信息實際上可能類似這樣（舉例）：

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

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

詳見 Util 實用工具

數據持久化優化

數據持久化現在給二次開發提供了全新的 API

API作用

d2adminUtilVuex2DbByUuid	根據用戶區分 將 store 某個值持久化
d2adminUtilDb2VuexByUuid	根據用戶區分 將持久化的 store 某個值復原
d2adminUtilVuex2Db	所有用戶公用 將 store 某個值持久化
d2adminUtilDb2Vuex	所有用戶公用 將持久化的 store 某個值復原
d2adminUtilDatabaseUser	獲取當前用戶的持久化區域
d2adminUtilDatabaseUserClear	清空當前用戶的持久化區域
d2adminUtilDatabase	獲取所有用戶公用的持久化區域
d2adminUtilDatabaseClear	清空所有用戶公用的持久化區域

借助這些 API 可以做什么？

• 將 store 中的某項持久化，可以區分用戶，也可以不區分
• 隨意持久化任何數據，可以區分用戶存儲，也可以存儲成所有用戶共享

詳見 VUEX 實用工具

在線示例（請先完成一次登陸）

• 用戶數據
• 公用數據

自動收集用戶瀏覽器信息

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

{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: {} } 復制代碼

側邊欄控制

API作用

d2adminMenuAsideCollapseSet	設置側邊欄收縮還是展開
d2adminMenuAsideCollapseToggle	切換側邊欄狀態

并且現在側邊欄的狀態會被自動持久化存儲，也就是說刷新瀏覽器后側邊欄會保持收縮或者展開

快速上手章節

為了讓大家更簡單地使用 D2Admin 搭建第一個頁面，新書寫了“快速上手”章節，后續計劃會出一系列教程。

• 前置知識
• 準備
• 下載項目
• 安裝環境
• 安裝依賴
• 開發調試
• 新建頁面
• 設置路由
• 設置菜單
• 效果
• 資源

詳見 快速上手

其它的更新信息見下節

更新日志

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

一些額外的事

被 "借鑒" 總是不愉快的

總結

首先感謝那些給我提出意見以及給我幫助的朋友（包括精神鼓勵還有紅包鼓勵），大家的 star 也是對我的鼓勵。

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

關于接下來的計劃還有正在進行的其它計劃，暫時還要保密，敬請期待吧！

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

項目地址

地址描述

團隊主頁	D2Admin 所屬的團隊主頁
中文文檔	中文文檔
完整版 預覽地址	完整版 預覽地址
完整版 github	完整版 Github 倉庫
完整版 碼云	完整版 碼云鏡像倉庫
簡化版 預覽地址	簡化版 預覽地址
簡化版 github	簡化版 Github 倉庫
簡化版 碼云	簡化版 碼云鏡像倉庫

在最后，如果你看完了，并且覺得還不錯，希望可以到 項目主頁 上點一個 star 作為你對這個項目的認可與支持，謝謝。

我的個人微信公眾號：

轉載于:https://juejin.im/post/5b5e5d3b6fb9a04f9244586d

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。