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 做为你对这个项目的承认与支持，谢谢。