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 做爲你對這個項目的承認與支持，謝謝。