时间过的真快，自从 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 作为你对这个项目的认可与支持，谢谢。
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hbhai1hi1hj