完善
Former-commit-id: dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly 8bbdd72ba63cd9161b2b2e51826b8813e8c9fffc [formerly e7d3090ad5a6f6801b32d0abce9a4e9291fcc0e7]]]]] Former-commit-id: 1be4f8ac464528598b8a52649c107686d01c08d8 Former-commit-id: 7317640b0da3a039d8ca5b6457c1263fc1261272 Former-commit-id: 29d4f7df0be48866f4309a012d38e008e1725438 [formerly 9ee9681b4a3200cc3b344673e83d9f5e4343f07a] Former-commit-id: fddc0694f8fbf921142069e11ff694ea218fa0d9 Former-commit-id: 92059d07f780aa09aaff77faf9bc41a8bd6269f0 Former-commit-id: aef5ddaf56545324913a9b425e7f8b7c3ed45518 Former-commit-id: 279be73fde5a48ddc78a258a2ea55a3b0d64fe2b Former-commit-id: b970cb8f0bbe694a3bf733e726f8c833a1f3f511
This commit is contained in:
liyang
184
docs/zh/guide/README.md
Normal file
184
docs/zh/guide/README.md
Normal file
@@ -0,0 +1,184 @@
|
||||
# 介绍
|
||||
|
||||
D2Admin 是一个开源的管理系统前端集成方案
|
||||
|
||||
<div>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
本项目仓库在 Github 和 Gitee 同步发布
|
||||
|
||||
[中文文档](http://d2admin.fairyever.com/zh/)
|
||||
|
||||
**完整版**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-preview)
|
||||
|
||||
**简化版模板**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin-start-kit) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin-start-kit) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index)
|
||||
|
||||
|
||||
|
||||
D2Admin 完整版集成了很多的插件和组件，首次加载会占用很多的时间，所以加入了首屏加载动画。
|
||||
|
||||
如果您欣赏 D2Admin 的设计风格，希望基于它开发您的管理系统，**建议使用 [d2-admin-start-kit 简化模板](https://github.com/d2-projects/d2-admin-start-kit)**，简化版模板保留了所有的系统功能，包括登陆注销，主题切换，图标，数据持久化等。其它不必要的组件和插件您可以参照 D2Admin 完整版自行加入。
|
||||
|
||||
如果您执意在完整版基础上开发，请您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件。
|
||||
|
||||
D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 工作之余完完成（希望您看到这里，可以移步 [Github](https://github.com/d2-projects/d2-admin) 点个 star 支持我），如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`。
|
||||
|
||||
|
||||
|
||||
::: tip Thanks
|
||||
D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日正式发布，39天时间 star 突破 1k ，在此对所有的 D2Admin 支持者表示感谢，项目将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
|
||||
|
||||
—— 2018年7月5日
|
||||
:::
|
||||
|
||||
> 1000 star 后 D2Admin 现已由一人维护改为归属于 [D2 Projects Organizations](https://github.com/d2-projects) 由多人维护
|
||||
|
||||
## 功能
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 简化Cookie操作
|
||||
* 时间日期计算工具
|
||||
* 导入 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出文本
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
* 提供三种方便的页面容器组件（正常卡片，隐形容器，填满页面）
|
||||
* 代码高亮显示
|
||||
* 加载并解析（或者直接指定资源） markdown 文件
|
||||
* GitHub 样式的 markdown 显示组件
|
||||
* markdown 内代码高亮
|
||||
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||
* 右键菜单组件
|
||||
* 自定义滚动条和滚动控制
|
||||
* 内置5种主题
|
||||
* 公用样式抽离，方便的主题定制
|
||||
* 支持百万级数据量的表格组件
|
||||
* 打包后随意目录部署（已经做好兼容设置）
|
||||
* 支持临时菜单配置
|
||||
* 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +`
|
||||
* 多标签页模式 `1.1.4 +`
|
||||
* 美化滚动条 `1.1.4 +`
|
||||
* json view `1.1.4 +`
|
||||
|
||||
## TODO
|
||||
|
||||
D2Admin 仍然处于开发中，这里有一些暂时的计划：
|
||||
|
||||
* 分离出简化版本
|
||||
* 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本
|
||||
* 增加右上角通知中心
|
||||
* 增加一些实例页面以提供业务页面布局建议
|
||||
* 面包屑导航
|
||||
* 树型表格组件
|
||||
* 更多类型的编辑器
|
||||
* socket 连接
|
||||
* 浏览器版本提示
|
||||
* 日志控制台
|
||||
* d2-container 组件 ghost 模式和 full 模式合并
|
||||
* `1.1.4 已完成` 自定义滚动条
|
||||
* `1.1.4 已完成` 多 tab 页结构
|
||||
* `1.1.3 已完成` 更换图表库
|
||||
* `1.1.0 已完成` 抽离项目里的文档，集中存放在文档站点
|
||||
* `1.1.0 已完成` 对主界面进行一次完善，调整整体布局和颜色
|
||||
* `1.1.0 已完成` 切换主题功能
|
||||
|
||||
欢迎你为 D2Admin 的开发作出贡献（代码编写/文档翻译）。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
├─ build
|
||||
├─ config
|
||||
├─ deploy
|
||||
├─ dist
|
||||
├─ docs // 文档
|
||||
├─ src
|
||||
│ ├─ assets // 资源
|
||||
│ │ ├─ icons
|
||||
│ │ ├─ image
|
||||
│ │ ├─ library
|
||||
│ │ └─ style
|
||||
│ ├─ components // 组件
|
||||
│ │ ├─ charts // 图表组件
|
||||
│ │ ├─ core // 核心组件
|
||||
│ │ └─ demo // 示例组件
|
||||
│ ├─ i18n // 多国语
|
||||
│ ├─ libs // 通用库
|
||||
│ ├─ menu // 菜单
|
||||
│ ├─ mock // 模拟数据
|
||||
│ ├─ pages // 页面
|
||||
│ ├─ plugin // 插件
|
||||
│ ├─ router // 路由
|
||||
│ ├─ store // vuex
|
||||
│ ├─ App.vue
|
||||
│ └─ main.js
|
||||
├─ static // 静态资源
|
||||
├─ .babelrc
|
||||
├─ .editorconfig
|
||||
├─ .eslintignore
|
||||
├─ .eslintrc.js
|
||||
├─ .gitattributes
|
||||
├─ .gitignore
|
||||
├─ .postcssrc.js
|
||||
├─ LICENSE
|
||||
├─ README.md
|
||||
├─ index.html
|
||||
└─ package.json
|
||||
```
|
||||
|
||||
## 获取代码
|
||||
|
||||
有两种方式可以获得 D2Admin 的代码
|
||||
|
||||
* 在 [releases](https://github.com/d2-projects/d2-admin/releases) 页面下载最新的发行版。发行版一般是完成了某个大升级或者修复重要 bug 后发布的压缩包，你可以下载下来直接使用
|
||||
|
||||
* Fork 仓库到你的 github 然后克隆到本地，然后使用 master 分支继续你的开发。这种方式得到的是最新的代码，但是会有未完成的新功能。**不建议使用这种方式**
|
||||
|
||||
* 由于 github 访问较慢，推荐前往码云仓库下载 [gitee.com/fairyever/d2-admin](https://gitee.com/fairyever/d2-admin)，码云上的仓库**在每次发布版本或者修复 bug 才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地
|
||||
|
||||
> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库
|
||||
|
||||
## 使用
|
||||
|
||||
```
|
||||
// 安装依赖
|
||||
npm i
|
||||
|
||||
// 运行
|
||||
npm run dev
|
||||
|
||||
// 打包
|
||||
npm run build
|
||||
```
|
||||
|
||||
> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
|
||||
87
docs/zh/guide/change-log.md
Normal file
87
docs/zh/guide/change-log.md
Normal file
@@ -0,0 +1,87 @@
|
||||
# 更新日志
|
||||
|
||||
## v1.1.5 dev
|
||||
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 多标签页操作全部转移至 vuex
|
||||
* [ 修改 ] 修复了多标签页无法清除缓存的 bug
|
||||
* [ 修改 ] bug fixed [#38](https://github.com/d2-projects/d2-admin/issues/38)
|
||||
* [ 修改 ] bug fixed [#41](https://github.com/d2-projects/d2-admin/issues/41)
|
||||
|
||||
## v1.1.4
|
||||
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 主题调优
|
||||
* [ 新增 ] playground 模块，方便测试和展示一些功能实现方式/调用方法
|
||||
* [ 新增 ] 灰度模式
|
||||
* [ 新增 ] 多页模式
|
||||
* [ 新增 ] 多页模式缓存
|
||||
* [ 新增 ] 多页模式快速关闭（关闭左侧 右侧 全部 其它）
|
||||
* [ 修改 ] 侧边栏滚动优化
|
||||
* [ 新增 ] `d2-container` 填充模式自定义滚动条
|
||||
* [ 新增 ] `d2-container` 组件卡片和隐形模式自定义滚动条
|
||||
* [ 新增 ] 现在页面标题可以根据路由做出对应变化了
|
||||
* [ 新增 ] 版本检查机制
|
||||
* [ 新增 ] `d2-container` 隐形模式支持 header 插槽
|
||||
* [ 新增 ] 版本检查可以设置为不显示提示框
|
||||
* [ 新增 ] 集成 json 查看组件
|
||||
* [ 新增 ] 添加了所有图表种类的演示页面
|
||||
* [ 修改 ] 修改布局方式，解决了在 Firefox 上 better-scroll 初始化拿不到正确高度的 bug
|
||||
* [ 新增 ] 右上角显示用户名，用户名持久存储
|
||||
|
||||
## v1.1.3
|
||||
|
||||
* [ 修复 ] 侧边栏在折叠时不显示的 bug
|
||||
* [ 新增 ] v-charts 插件
|
||||
* [ 新增 ] 一些演示图表（后续打算把 v-charts 文档上有示例性的演示都展示一下）
|
||||
* [ 修改 ] D2Admin 经典主题颜色调整
|
||||
* [ 新增 ] violet 主题
|
||||
* [ 新增 ] 菜单图标
|
||||
* [ 修改 ] 新制作了 Fork me 图片
|
||||
|
||||
## v1.1.2
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的依赖
|
||||
|
||||
## v1.1.1
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的代码（移除图表库）
|
||||
* [ 优化 ] 侧边栏取值逻辑
|
||||
|
||||
## v1.1.0
|
||||
|
||||
* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 数据 + 递归组件 实现无限制多级菜单
|
||||
* [ 修改 ] 路由注册回归最简单的写法
|
||||
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 d2-app-loading 前缀
|
||||
* [ 修改 ] 所有类似 dd- 的样式前缀(包括自动注册图标的id前缀)统一改为 d2-
|
||||
* [ 修复 ] 修复 d2-highlight 组件和 d2-markdown 组件的样式冲突
|
||||
* [ 修改 ] 内置组件名称统一改为 d2- 前缀，统一使用横线连接 (kebab-case) 风格
|
||||
* [ 修改 ] 顶栏 logo 阴影删除
|
||||
* [ 新增 ] 主题系统
|
||||
* [ 新增 ] 三个主题，分别为 d2admin 经典，简约线条，流星
|
||||
* [ 修改 ] d2-markdown 组件 md 参数改名为 source
|
||||
* [ 修改 ] 删除了 d2-markdown 组件中图片的白色背景
|
||||
* [ 修改 ] 删除 timeago 插件，更换为更强大的 dayjs
|
||||
* [ 新增 ] Tomorrow Night Blue 主题
|
||||
* [ 修改 ] src/assets/style/public-class.scss 写法优化
|
||||
* [ 新增 ] [vue-bigdata-table](https://github.com/lison16/vue-bigdata-table)组件
|
||||
* [ 修复 ] 侧边栏内容超过一屏后显示错误
|
||||
* [ 新增 ] 自定义滚动条演示页面
|
||||
* [ 新增 ] 流星主题新增背景图片上层的半透明遮罩
|
||||
* [ 修复 ] 主题设置失效bug
|
||||
* [ 修复 ] router守卫验证登陆部分代码修改
|
||||
* [ 修复 ] d2-container 组件改为同步注册（之前的异步注册会有 mounted 生命周期问题，即 slot 内的页面在 mounted 生命周期内拿不到 dom）
|
||||
* [ 修复 ] d2-container 组件重构 flex 布局
|
||||
* [ 新增 ] 404 page
|
||||
* [ 新增 ] 顶栏联系方式
|
||||
* [ 新增 ] 右键菜单组件
|
||||
* [ 新增 ] 菜单配置支持空菜单（项目开发的时候有可能需要先把菜单做好查看效果）
|
||||
* [ 优化 ] 页面左侧菜单滚动条优化
|
||||
* [ 修复 ] CSS 边距工具类都加上了 `!important` 来保证在覆盖样式时生效
|
||||
* [ 修复 ] IE11 兼容性修复
|
||||
|
||||
## v1.0.0
|
||||
|
||||
[https://github.com/d2-projects/d2-admin/releases/tag/v1.0.0](https://github.com/d2-projects/d2-admin/releases/tag/v1.0.0)
|
||||
|
||||
这是第一个版本，还有一点小问题，但是已经可用
|
||||
1
docs/zh/guide/image/join@2x.png.REMOVED.git-id
Normal file
1
docs/zh/guide/image/join@2x.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
f7a47389e6c0773e9d218227678ebb8850ea87e8
|
||||
1
docs/zh/guide/image/preview@2x.png.REMOVED.git-id
Normal file
1
docs/zh/guide/image/preview@2x.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
27e431bd9e4752dd51fe827a1281d606bd7bdf07
|
||||
13
docs/zh/guide/pr.md
Normal file
13
docs/zh/guide/pr.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# 贡献指南
|
||||
|
||||
## 如何贡献代码
|
||||
|
||||
首先在[项目主页](https://github.com/d2-projects/d2-admin) fork 本仓库，然后进行你的开发，请确保你的开发是在 **dev** 分支进行。本地测试无误后方可 pull request，我在检查通过后会合并代码到原始仓库。
|
||||
|
||||
## 要求
|
||||
|
||||
本项目代码需要符合[vue.js 风格指南](https://cn.vuejs.org/v2/style-guide/)中[优先级A](https://cn.vuejs.org/v2/style-guide/#%E4%BC%98%E5%85%88%E7%BA%A7-A-%E7%9A%84%E8%A7%84%E5%88%99%EF%BC%9A%E5%BF%85%E8%A6%81%E7%9A%84-%E8%A7%84%E9%81%BF%E9%94%99%E8%AF%AF)和[优先级B](https://cn.vuejs.org/v2/style-guide/#%E4%BC%98%E5%85%88%E7%BA%A7-B-%E7%9A%84%E8%A7%84%E5%88%99%EF%BC%9A%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90-%E5%A2%9E%E5%BC%BA%E5%8F%AF%E8%AF%BB%E6%80%A7)的要求以及本项目中的 ESlint 校验
|
||||
|
||||
::: tip
|
||||
由于项目初始没有仔细遵循风格指南，可能项目代码中已经存在不符合规范的代码，欢迎批评指正或者直接pr
|
||||
:::
|
||||
329
docs/zh/guide/question.md
Normal file
329
docs/zh/guide/question.md
Normal file
@@ -0,0 +1,329 @@
|
||||
# 常见问题
|
||||
|
||||
本章总结收到的用户反馈问题，集中展示，方便后续用户自助解决问题
|
||||
|
||||
## 无法启动项目
|
||||
|
||||
如果在 `run dev` 或者 `npm i` 的过程中报错，首先建议您升级 node 版本 > 8，在以下环境测试可用
|
||||
|
||||
``` {10}
|
||||
➜ ~ npm -v
|
||||
5.6.0
|
||||
➜ ~ node -v
|
||||
v8.11.1
|
||||
➜ ~ nrm -V
|
||||
1.0.2
|
||||
➜ ~ nrm ls
|
||||
npm ---- https://registry.npmjs.org/
|
||||
cnpm --- http://r.cnpmjs.org/
|
||||
* taobao - https://registry.npm.taobao.org/
|
||||
nj ----- https://registry.nodejitsu.com/
|
||||
rednpm - http://registry.mirror.cqupt.edu.cn/
|
||||
npmMirror https://skimdb.npmjs.com/registry/
|
||||
edunpm - http://registry.enpmjs.org/
|
||||
```
|
||||
|
||||
::: tip
|
||||
推荐使用 [nrm](https://github.com/Pana/nrm) 管理 npm 源，不建议使用 cnpm
|
||||
:::
|
||||
|
||||
在正在开发的 1.2.x 版本（也有可能在你看到这的时候版本已经比 1.2.x 更晚）中，我们不再使用 npm 作为推荐的包安装工具，取而代之的是使用 [yarn](https://yarnpkg.com/zh-Hans/)，使用方法如下
|
||||
|
||||
```
|
||||
// 安装依赖
|
||||
yarn
|
||||
// 启动调试服务
|
||||
yarn run serve
|
||||
```
|
||||
|
||||
## node-sass 安装失败
|
||||
|
||||
由于某些不可描述的原因，利用 npm 进行安装模块的时候会发生包下载失败的情况，node-sass 尤其的频繁，或者说 node-sass 的二进制文件是接近百分百失败的，即使用 yarn 安装也依旧在这个点失败，给出以下建议
|
||||
|
||||
**方法1**
|
||||
|
||||
首先，需要提前下载 node-sass 的二进制文件，这个文件可以去 cnpm 仓库下载或者 node-sass 的 github 上去下载，在下载之前我们需要先查看电脑的系统的版本，来确定适合哪个版本的二进制文件，查看版本的指令如下：
|
||||
|
||||
``` sh
|
||||
node -p "[process.platform, process.arch, process.versions.modules].join('-')"
|
||||
```
|
||||
|
||||
输入这个指令后会弹出一个系统版本，然后在下面两个地址中选择一个去下载对应系统版本的后缀为 .node 的 node-sass 文件
|
||||
|
||||
[cnpm https://npm.taobao.org/mirrors/node-sass/](https://npm.taobao.org/mirrors/node-sass/)
|
||||
|
||||
[github https://github.com/sass/node-sass/releases](https://github.com/sass/node-sass/releases)
|
||||
|
||||
下载完保存到任意位置，最好放置到 package.json 所在位置。然后我们需要手动指定 node-sass 二进制文件的下载源为下载的那个文件，以下是npm与yanr的指令：
|
||||
|
||||
npm
|
||||
|
||||
``` sh
|
||||
npm config set sass-binary-path 你存放刚才下载的二进制文件的目录
|
||||
// 例如 npm config set sass-binary-path e:/web/win32-x64-48_binding.node
|
||||
```
|
||||
|
||||
yarn
|
||||
|
||||
``` sh
|
||||
yarn config set sass-binary-path 你存放刚才下载的二进制文件的目录
|
||||
// 例如 yarn config set sass-binary-path e:/web/win32-x64-48_binding.node
|
||||
```
|
||||
|
||||
然后我们即可用正常指令下载了
|
||||
|
||||
::: tip 注意
|
||||
此方法会绑定为本地文件，即无法更新 node-sass 了。如果不希望这样，请使用第二种方法
|
||||
:::
|
||||
|
||||
**方法2**
|
||||
|
||||
此方案将把下载源指定为cnpm仓库，更建议使用这种方法
|
||||
|
||||
全部的下载源指向cnpm的指令
|
||||
|
||||
npm
|
||||
|
||||
``` sh
|
||||
npm config set registry http://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
yarn
|
||||
|
||||
``` sh
|
||||
yarn config set registry http://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
只指定node-sass的下载源（建议使用）
|
||||
|
||||
npm
|
||||
|
||||
``` sh
|
||||
npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
|
||||
```
|
||||
|
||||
yarn
|
||||
|
||||
``` sh
|
||||
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
|
||||
```
|
||||
|
||||
## 无法跳转路由
|
||||
|
||||
有可能你在 D2Admin 的基础上进行你的开发时，发现在登陆页面进行
|
||||
|
||||
``` js
|
||||
this.$router.push({ name: 'index' })
|
||||
```
|
||||
|
||||
跳转的时候页面并没有跳转，这是因为你很有可能没有进行下面的操作：
|
||||
|
||||
``` js
|
||||
Cookies.set('token', res.token, setting)
|
||||
```
|
||||
|
||||
原因根源是在 `src/router/index.js` 中有如下一段代码，根据 `token` 判断用户是否登陆
|
||||
|
||||
``` js {3-9}
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(r => r.meta.requiresAuth)) {
|
||||
if (Cookies.get('token')) {
|
||||
next()
|
||||
} else {
|
||||
next({
|
||||
name: 'login'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
所以如果你没有存 token 字段在 cookie 中，路由鉴权机制将会重定向到登录页
|
||||
|
||||
如果你想修改基于 token 验证用户登陆状态的机制，请在 `./src` 下搜索 `token` 关键字并修改他们，但是我**十分不建议你修改它们**
|
||||
|
||||
最好的做法是在登陆后返回本次登陆的 token 并且存储在 cookie 中，然后在每次 ajax 请求时都携带这个 token 给后端做权限验证（必要的话你可以还可以增加 token 的更新机制）
|
||||
|
||||
::: tip 同样需要注意的地方
|
||||
除了需要在 cookie 中保存 token，你还要保存 uuid 字段，意为“用户唯一标识”
|
||||
|
||||
``` js
|
||||
Cookies.set('uuid', res.uuid, setting)
|
||||
```
|
||||
|
||||
D2Admin 会在很多地方使用 cookie 中的此字段区分用户，比如不同用户选择的不同主题的数据持久化，还有不同用户打开的多标签页数据的持久化存储。
|
||||
:::
|
||||
|
||||
## 文档运行报错
|
||||
|
||||
这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤
|
||||
|
||||
首先将 vuepress 安装到全局
|
||||
|
||||
``` sh
|
||||
npm i -g vuepress
|
||||
```
|
||||
|
||||
启动服务
|
||||
|
||||
``` sh
|
||||
npm run doc:dev
|
||||
```
|
||||
|
||||
::: tip
|
||||
你可能会发现项目目录中有一个 deploy 文件夹，这个文件是为了方便发布和提交代码用的，通常你并不需要使用它
|
||||
:::
|
||||
|
||||
## 删除页面右上角 github 链接
|
||||
|
||||
在 `src/components/demo/d2-demo-page-cover/index.vue` 中删除相关代码即可
|
||||
|
||||
## 兼容性
|
||||
|
||||
首先 vue.js 和 ElementUI 做不到兼容的，D2Admin 肯定也兼容不了，实测在 macOS 下 Chrome 和新版本的火狐浏览器以及 Safari 都正常使用，这类管理系统一般是内部使用，通常不必太纠结兼容低版本浏览器，如果你发现了显示的 bug，可以加 QQ 群反应，如果你可以修复这个 bug 使其在你的浏览器上显示正常，欢迎你的 pr。
|
||||
|
||||
## 删除项目里的 G2 图表库
|
||||
|
||||
出于为用户考虑，作者个人实现的图表集成方案肯定不如其它专门做这方面的开源产品（这是肯定的，客观来讲作者的个人水平和 v-charts 的团队水平不在一个等级），所以G2 图表库在 `1.1.1` 版本删除，后续版本换成 `v-charts`。如果你在开始使用 D2Admin 是在 `1.1.0` 以及之前，你的项目里应该有 G2 图表库，如果你不想保留，下面的向导将会指导你删除它
|
||||
|
||||
::: tip
|
||||
下面的教程都是在 `1.1.0` 版本（行号为下载后没进行任何改动的行号）基础上
|
||||
:::
|
||||
|
||||
1. 删除相关路由
|
||||
|
||||
删除文件 `src/router/index.js` 中 **34 ~ 53** 行代码
|
||||
|
||||
``` js
|
||||
{
|
||||
path: '/demo/chart',
|
||||
name: 'demo-chart',
|
||||
meta,
|
||||
redirect: { name: 'demo-chart-index' },
|
||||
component: () => import('@/components/core/d2-layout-main'),
|
||||
children: (pre => [
|
||||
...
|
||||
])('demo-chart-')
|
||||
},
|
||||
```
|
||||
|
||||
2. 删除菜单
|
||||
|
||||
删除文件 `src/menu/index.js` 中 **119 ~ 143** 以及 **240** 和 **256** 行代码
|
||||
|
||||
``` js
|
||||
// 路由菜单 图表
|
||||
const demoChart = {
|
||||
path: '/demo/chart',
|
||||
title: '图表 G2',
|
||||
icon: 'pie-chart',
|
||||
children: (pre => [
|
||||
...
|
||||
])('/demo/chart/')
|
||||
}
|
||||
```
|
||||
|
||||
``` js {5,12}
|
||||
export const side = [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
demoChart // <- 注意这里
|
||||
]
|
||||
// 修改为
|
||||
export const side = [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement
|
||||
// 删除了 demoChart
|
||||
]
|
||||
```
|
||||
|
||||
``` js {13,31}
|
||||
export default [
|
||||
{
|
||||
path: '/index',
|
||||
title: '首页'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '集成功能',
|
||||
children: [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
demoChart, // <- 注意这里
|
||||
{
|
||||
title: '空菜单演示',
|
||||
icon: 'folder-o',
|
||||
children: [ ...
|
||||
// 修改为
|
||||
export default [
|
||||
{
|
||||
path: '/index',
|
||||
title: '首页'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '集成功能',
|
||||
children: [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
// 删除了 demoChart
|
||||
{
|
||||
title: '空菜单演示',
|
||||
icon: 'folder-o',
|
||||
children: [ ...
|
||||
```
|
||||
|
||||
3. 删除文件
|
||||
|
||||
* 删除 `src/components/charts` 目录
|
||||
|
||||
* 删除 `src/components/index.js` 中的相关内容（高亮部分）
|
||||
|
||||
```js {5-6}
|
||||
// 核心组件
|
||||
import './core/register'
|
||||
// 非核心组件 只是在很多演示页面中用到的组件
|
||||
import './demo/register'
|
||||
// 图表组件
|
||||
import './charts/register'
|
||||
```
|
||||
|
||||
* 删除 `src/mock/chart` 目录
|
||||
|
||||
* 删除 `src/mock/register.js` 中的相关内容（高亮部分）
|
||||
|
||||
```js {7}
|
||||
import Mock from 'mockjs'
|
||||
|
||||
import '@/mock/ajax-demo'
|
||||
|
||||
import '@/mock/login'
|
||||
|
||||
import '@/mock/chart/register.js'
|
||||
|
||||
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
|
||||
Mock.setup({
|
||||
timeout: '300-600'
|
||||
})
|
||||
```
|
||||
|
||||
* 删除 `src/pages/demo/chart` 目录
|
||||
|
||||
4. 删除依赖
|
||||
|
||||
打开终端 cd 到项目文件夹，执行
|
||||
|
||||
``` sh
|
||||
npm remove @antv/data-set -S
|
||||
npm remove @antv/g2 -S
|
||||
```
|
||||
|
||||
## 项目里有未完成的代码
|
||||
|
||||
有些示例（比如 v-charts 和 ElementUI）是很方便就可以找到官网示例和文档的，这些插件和组件的示例在本项目中就可能处于未完成的状态，但是以后会完成
|
||||
Reference in New Issue
Block a user