D2Admin 7月份更新內容：cli3以及更方便的全域性控制等

時間過的真快，自從 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 作為你對這個專案的認可與支援，謝謝。

我的個人微信公眾號：