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