Merge branch 'hotfix/delete_doc'
Former-commit-id: bdb72025392cc7fd9bb6961b52b41ecec7ff6867 [formerly bdb72025392cc7fd9bb6961b52b41ecec7ff6867 [formerly bdb72025392cc7fd9bb6961b52b41ecec7ff6867 [formerly bdb72025392cc7fd9bb6961b52b41ecec7ff6867 [formerly 6fd6c717caadbac2ce2b562c238f228f9426e60b [formerly 9ed36b114a259cd7959fc7284d9f0cc99b5d5349]]]]] Former-commit-id: 28048a5138559ae189a0fb596e06639ec132b5be Former-commit-id: 3d0ac199d5edb1e9b62b1514b27be3a4328c9b1e Former-commit-id: 2a21c6ddd1a86886fddbfe2c59eeff29e353f05e [formerly 726f064d09b159cae0ce38eb3dc25e740b1df6f2] Former-commit-id: ea5a14872193d49126837c8f34f4caa6cd3f73e5 Former-commit-id: 1017e56a1e23e26fb6f0beb42d07bde9aee8c9e3 Former-commit-id: a0fdffe98875c595b764a02c5e42b5c0a6e62bf2 Former-commit-id: 51ddced1ac2d0e4769b1f00b48ef8d65f48e370f Former-commit-id: e5cae25aefedfa16a8521a4f8a0021b69f3e20a8
This commit is contained in:
liyang
21
.travis.yml
Normal file
21
.travis.yml
Normal file
@@ -0,0 +1,21 @@
|
||||
language: node_js
|
||||
node_js: stable
|
||||
cache:
|
||||
directories:
|
||||
- "node_modules"
|
||||
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
script:
|
||||
- npm run build
|
||||
|
||||
deploy:
|
||||
provider: pages
|
||||
local-dir: dist
|
||||
skip-cleanup: true
|
||||
github-token: $GITHUB_TOKEN
|
||||
keep-history: true
|
||||
on:
|
||||
branch: master
|
||||
@@ -1,25 +0,0 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
# 确保脚本抛出遇到的错误
|
||||
set -e
|
||||
|
||||
# 生成静态文件
|
||||
npm run doc:build
|
||||
|
||||
# 进入生成的文件夹
|
||||
cd docs/.vuepress/dist
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io
|
||||
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io/<REPO>
|
||||
# git push -f git@github.com:FairyEver/d2-admin.git master:gh-pages
|
||||
git push -f git@gitee.com:fairyever/d2-admin-doc.git master
|
||||
|
||||
cd -
|
||||
|
||||
echo "publish to http://d2admin.fairyever.com/"
|
||||
@@ -1,7 +0,0 @@
|
||||
set -e
|
||||
|
||||
git add --all
|
||||
|
||||
git commit -m 'no message'
|
||||
|
||||
git push
|
||||
@@ -1,239 +0,0 @@
|
||||
module.exports = {
|
||||
// base: '/d2-admin-doc/lastest/', // 发布到 http://app.d3collection.cn/d2-admin-doc/lastest/
|
||||
locales: {
|
||||
'/': {
|
||||
lang: 'en-US',
|
||||
title: 'D2 Admin',
|
||||
description: 'Elegant management system front-end integration'
|
||||
},
|
||||
'/zh/': {
|
||||
lang: 'zh-CN',
|
||||
title: 'D2 Admin',
|
||||
description: '优雅的管理系统前端集成方案'
|
||||
}
|
||||
},
|
||||
head: [
|
||||
['link', { rel: 'icon', href: `/logo@2x.png` }],
|
||||
['script', {}, 'var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?be9d34853430c136b5d62c3081d556a5";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();']
|
||||
],
|
||||
themeConfig: {
|
||||
// 项目仓库地址
|
||||
repo: 'https://github.com/d2-projects/d2-admin',
|
||||
// 文档不是放在仓库的根目录下
|
||||
docsDir: 'docs',
|
||||
// 默认是 false, 设置为 true 来启用
|
||||
editLinks: true,
|
||||
// 多国语言
|
||||
locales: {
|
||||
'/': {
|
||||
selectText: 'Languages',
|
||||
label: 'English',
|
||||
editLinkText: 'Edit this page on GitHub',
|
||||
lastUpdated: 'Last update'
|
||||
},
|
||||
'/zh/': {
|
||||
selectText: '语言',
|
||||
label: '简体中文',
|
||||
editLinkText: '在 GitHub 上编辑此页',
|
||||
lastUpdated: '最后更新',
|
||||
nav: [
|
||||
{
|
||||
text: '学习',
|
||||
items: [
|
||||
{ text: '教程', link: '/zh/learn-guide/' },
|
||||
{ text: '基础知识', link: '/zh/learn-knowledge/' },
|
||||
{ text: '升级指引', link: '/zh/learn-update/' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '模块',
|
||||
items: [
|
||||
{ text: '组件', link: '/zh/sys-components/' },
|
||||
{ text: '插件', link: '/zh/sys-plugins/' },
|
||||
{ text: 'vuex', link: '/zh/sys-vuex/' },
|
||||
{ text: '路由', link: '/zh/sys-route/' },
|
||||
{ text: '菜单', link: '/zh/sys-menu/' },
|
||||
{ text: '异步请求', link: '/zh/sys-ajax/' },
|
||||
{ text: '多页面', link: '/zh/sys-multi-page/' },
|
||||
{ text: '数据持久化', link: '/zh/sys-db/' },
|
||||
{ text: 'CSS 实用类', link: '/zh/sys-css/' },
|
||||
{ text: 'JS Util', link: '/zh/sys-util/' },
|
||||
{ text: 'cli3 和 webpack', link: '/zh/sys-cli3-webpack/' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '生态',
|
||||
items: [
|
||||
{ text: 'D2 Admin start kit', link: '/zh/ecosystem-d2-admin-start-kit/' },
|
||||
{ text: 'D2 Admin ICE', link: '/zh/ecosystem-d2-admin-ice/' },
|
||||
{ text: 'D2 CRUD', link: '/zh/ecosystem-d2-crud/' },
|
||||
{ text: 'D2 Ribbons', link: '/zh/ecosystem-d2-ribbons/' }
|
||||
]
|
||||
},
|
||||
{ text: '文章', link: '/zh/article/' },
|
||||
{
|
||||
text: '其它',
|
||||
items: [
|
||||
{ text: '更新日志', link: '/zh/change-log/' },
|
||||
{ text: '参与者名单', link: '/zh/collaborator/' },
|
||||
{ text: '借鉴 D2Admin 的项目', link: '/zh/plagiarize/' },
|
||||
{
|
||||
text: '交流',
|
||||
items: [
|
||||
{ text: '微信公众号', link: '/zh/communication-we/' },
|
||||
{ text: '交流群', link: '/zh/communication-group-chat/' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '关注我们',
|
||||
items: [
|
||||
{ text: '掘金', link: 'https://juejin.im/user/57a48b632e958a006691b946/posts' },
|
||||
{ text: 'CSDN', link: 'https://blog.csdn.net/fairyever' },
|
||||
{ text: 'segmentfault', link: 'https://segmentfault.com/blog/liyang-note-book' },
|
||||
{ text: '知乎', link: 'https://www.zhihu.com/people/fairy-ever/activities' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'D2 在其它地方',
|
||||
items: [
|
||||
{ text: 'awesome-vue', link: 'https://github.com/vuejs/awesome-vue' },
|
||||
{ text: 'ant design scaffolds', link: 'http://scaffold.ant.design/#/scaffolds/d2-admin' },
|
||||
{ text: 'ice vue scaffold', link: 'https://alibaba.github.io/ice/scaffold?type=vue' },
|
||||
{ text: 'awesomes.cn', link: 'https://www.awesomes.cn/repo/d2-projects/d2-admin' },
|
||||
{ text: 'oschina.net', link: 'https://www.oschina.net/p/D2admin' },
|
||||
{ text: 'ctolib.com', link: 'https://www.ctolib.com/FairyEver-d2-admin.html' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ text: '常见问题', link: '/zh/question/' },
|
||||
{
|
||||
text: '旧版文档',
|
||||
items: [
|
||||
{ text: '1.1.11', link: 'http://app.d3collection.cn/d2-admin-doc/1.1.11/zh/' }
|
||||
]
|
||||
}
|
||||
],
|
||||
sidebar: {
|
||||
'/zh/learn-guide/': sideBarLearnGuide(),
|
||||
'/zh/learn-update/': sideBarLearnUpdate(),
|
||||
'/zh/learn-knowledge/': sideBarKnowledge(),
|
||||
'/zh/sys-components/': sideBarSysComponents(),
|
||||
'/zh/sys-plugins/': sideBarSysPlugins(),
|
||||
'/zh/article/': sideBarArticle('版本发布', 'Cookbook'),
|
||||
'/zh/ecosystem-d2-crud/': sideBarEcosystemD2Crud()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function sideBarLearnGuide () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'getting-started'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarLearnUpdate () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'ice-1.2.6-to-1.2.7.md'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarKnowledge () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'javascript.md'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarSysComponents () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'container',
|
||||
'icon',
|
||||
'icon-svg',
|
||||
'icon-select',
|
||||
'markdown',
|
||||
'highlight',
|
||||
'count-up',
|
||||
'charts'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarSysPlugins () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'data-export',
|
||||
'data-import',
|
||||
'i18n',
|
||||
'mock',
|
||||
'error',
|
||||
'log',
|
||||
'console'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarArticle (titleUpdate, titleCookbook) {
|
||||
return [
|
||||
{
|
||||
title: titleCookbook,
|
||||
collapsable: false,
|
||||
children: [
|
||||
'cookbook/what-is-cookbook',
|
||||
'cookbook/combinable-questionnaire'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: titleUpdate,
|
||||
collapsable: false,
|
||||
children: [
|
||||
'update/1.2.0',
|
||||
'update/ice-1.1.2',
|
||||
'update/1.1.5',
|
||||
'update/1.1.4',
|
||||
'update/0.0.0',
|
||||
'update/introduce'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarEcosystemD2Crud () {
|
||||
return [
|
||||
{
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'guide',
|
||||
'api',
|
||||
'example'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
$accentColor = #409EFF
|
||||
@@ -1 +0,0 @@
|
||||
d9ade30cf874de657275755e4783fde51f2f6ffc
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
home: true
|
||||
heroImage: /logo@2x.png
|
||||
actionText: Get Started →
|
||||
actionLink: /zh/guide/
|
||||
features:
|
||||
- title: Vue-Powered
|
||||
details: Enjoy the dev experience of Vue + webpack, Ultra fast virtual DOM and the most economical optimization.
|
||||
- title: Rich integration
|
||||
details: The plug-ins and components that are likely to be used are ready for you. Some come from third parties, others are designed for d2admin.
|
||||
- title: ElementUI component library
|
||||
details: Integrated and robust ElementUI, and use any ElementUI component at will.
|
||||
footer: MIT Licensed | Copyright © 2018-present FairyEver
|
||||
---
|
||||
|
||||
**The English document will be launched in the future. Please move to the Chinese document.**
|
||||
|
||||
**英文文档会在中文文档大致完成后推出，现请移步中文文档**
|
||||
|
||||
```
|
||||
// install package
|
||||
npm i
|
||||
// run
|
||||
npm run dev
|
||||
// build
|
||||
npm run build
|
||||
```
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
home: true
|
||||
heroImage: /logo@2x.png
|
||||
actionText: 快速上手 →
|
||||
actionLink: /zh/learn-guide/
|
||||
features:
|
||||
- title: Vue驱动
|
||||
details: 享受 Vue + webpack 的开发体验，超快虚拟 DOM 和最省心的优化。
|
||||
- title: 强大的数据持久化方案
|
||||
details: 内部封装了多种数据持久化方式，您可以在数据持久化时区分用户，区分页面，甚至可以创建页面数据快照。
|
||||
- title: 模块化全局状态管理
|
||||
details: D2Admin 的系统管理为独立模块，在此模块内根据功能划分为十几个模块，每个模块都分工明确。
|
||||
- title: 贴心小工具
|
||||
details: 为您准备了实用的 JavaScript Util 以及 CSS 常用类。
|
||||
- title: 丰富集成
|
||||
details: 已经为你准备好了很可能用到的插件和组件，专为 D2Admin 设计，或者来自第三方。
|
||||
- title: ElementUI组件库
|
||||
details: 集成完善且强大的 ElementUI，随意搭配使用任何 ElementUI 组件。
|
||||
- title: 可视化构建
|
||||
details: 支持 CLI3 的可视化面板，并且提供飞冰版本脚手架。
|
||||
- title: 文档完善
|
||||
details: 提供事无巨细的文档说明，并且文档也一直在更新完善。
|
||||
- title: 活跃交流群
|
||||
details: 提供QQ和微信群供大家集中讨论学习，或者互相解决问题。
|
||||
footer: MIT Licensed | Copyright © 2018-present FairyEver
|
||||
---
|
||||
@@ -1,3 +0,0 @@
|
||||
# 文章
|
||||
|
||||
请在侧边栏目录选择文章阅读
|
||||
@@ -1 +0,0 @@
|
||||
050ae20fc14e789a5b567859da6853b56186211e
|
||||
@@ -1,3 +0,0 @@
|
||||
# 什么是 Cookbook
|
||||
|
||||
计算机领域的 Cookbook 指的是实用经典案例的意思，是对一些普遍性问题的解决方案的总结和整理。
|
||||
@@ -1,123 +0,0 @@
|
||||
# 公布项目
|
||||
|
||||
|
||||
|
||||
# 介绍
|
||||
|
||||
D2Admin 是一个开源的管理系统前端集成方案
|
||||
|
||||
[Github仓库](https://github.com/d2-projects/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview/#/index) - [中文文档](https://fairyever.gitee.io/d2-admin-doc/zh/)
|
||||
|
||||
D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡
|
||||
|
||||
**QQ群**
|
||||
|
||||
群号 806395827 欢迎大家
|
||||
|
||||
**微信群**
|
||||
|
||||
作者微信 liyang1711467488
|
||||
|
||||
> 微信群需要先加群主才可以拉进群
|
||||
|
||||
## 功能
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登录和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 简化Cookie操作
|
||||
* 时间日期计算工具
|
||||
* 导入 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出文本
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
* 提供三种方便的页面容器组件（正常卡片，隐形容器，填满页面）
|
||||
* 代码高亮显示
|
||||
* 加载并解析（或者直接指定资源） markdown 文件
|
||||
* GitHub 样式的 markdown 显示组件
|
||||
* markdown 内代码高亮
|
||||
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||
* 右键菜单组件
|
||||
* 自定义滚动条和滚动控制
|
||||
* 内置4种主题
|
||||
* 公用样式抽离，方便的主题定制
|
||||
* 支持百万级数据量的表格组件
|
||||
* 打包后随意目录部署（已经做好兼容设置）
|
||||
|
||||
## TODO
|
||||
|
||||
D2Admin 仍然处于开发中，这里有一些计划：
|
||||
|
||||
* 分离出简化版本
|
||||
* 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本
|
||||
* 增加右上角通知中心
|
||||
* 增加一些实例页面以提供业务页面布局建议
|
||||
* 更换图表库
|
||||
* 多 tab 页结构
|
||||
* 面包屑导航
|
||||
* 树型表格组件
|
||||
* `1.1.0 完成` 抽离项目里的文档，集中存放在文档站点
|
||||
* `1.1.0 完成` 对主界面进行一次完善，调整整体布局和颜色
|
||||
* `1.1.0 完成` 切换主题功能
|
||||
|
||||
欢迎你为 D2Admin 的开发作出贡献（代码编写/文档翻译）。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
├─ build
|
||||
├─ config
|
||||
├─ docs // 文档
|
||||
├─ src
|
||||
│ ├─ assets // 资源
|
||||
│ │ ├─ icons
|
||||
│ │ ├─ image
|
||||
│ │ ├─ library
|
||||
│ │ └─ style
|
||||
│ ├─ components // 组件
|
||||
│ │ ├─ charts
|
||||
│ │ ├─ core
|
||||
│ │ └─ demo
|
||||
│ ├─ i18n // 多国语
|
||||
│ ├─ menu // 菜单
|
||||
│ ├─ mock // 模拟数据
|
||||
│ ├─ pages // 页面
|
||||
│ ├─ plugin // 插件
|
||||
│ ├─ router // 路由
|
||||
│ ├─ store // vuex
|
||||
│ ├─ utils
|
||||
│ ├─ App.vue
|
||||
│ └─ main.js
|
||||
├─ static // 静态资源
|
||||
├─ .babelrc
|
||||
├─ .editorconfig
|
||||
├─ .eslintignore
|
||||
├─ .eslintrc.js
|
||||
├─ .gitattributes
|
||||
├─ .gitignore
|
||||
├─ .postcssrc.js
|
||||
├─ LICENSE
|
||||
├─ README.md
|
||||
├─ deploy.sh
|
||||
├─ design.sketch // 设计文件
|
||||
├─ index.html
|
||||
└─ package.json
|
||||
```
|
||||
@@ -1,219 +0,0 @@
|
||||
# 版本发布 1.1.4
|
||||
|
||||
|
||||
|
||||
D2Admin 是一个 **注重外观表现** 的管理系统 **PC端** 集成方案，现在正在紧张开发维护。
|
||||
|
||||
## 前言
|
||||
|
||||
距离 D2Admin 正式和大家见面(开源)，已经过去一个多月了。
|
||||
|
||||
|
||||
|
||||
现在想想这一个月真是很忙碌，几乎所有的业余时间都用在了开源项目上，公司没事的时候在写，晚上回家每天都要写到一点左右，回家火车上都在忙着改代码...
|
||||
|
||||
|
||||
|
||||
上图：好友不幸骨折，守着他编码...（希望他早点康复）
|
||||
|
||||
有天我和朋友说，感觉真是开源个项目，把自己整个人都开源了，一个人又要设计又要写代码又要写文档还要回答问题，除了上班吃睡就都是它了！
|
||||
|
||||
但是就我个人而言，我感觉倒也是一种不错的体验。
|
||||
|
||||
通过这个开源产品，认识了很多朋友，有了自己的小交流群，平日没事了大家一起讨论讨论问题也挺不错。当然也新认识了一些大佬（膜拜），通过交流也有不小的收获。
|
||||
|
||||
## 介绍
|
||||
|
||||
废话不多说了，一介码农也没有什么文采，今天也是趁着发版的机会小发表一些想法，下面就介绍一下这一个月来究竟升级了什么吧，先放几张截图吧：
|
||||
|
||||
### 预览
|
||||
|
||||
经典主题:
|
||||
|
||||
|
||||
|
||||
集成组件和插件:
|
||||
|
||||
|
||||
|
||||
图标选择器:
|
||||
|
||||
|
||||
|
||||
版本检查:
|
||||
|
||||
|
||||
|
||||
灰度模式:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
数据持久化:
|
||||
|
||||
|
||||
|
||||
图表:
|
||||
|
||||
|
||||
|
||||
主题:
|
||||
|
||||
|
||||
|
||||
响应大家需求，这次最大的升级：多标签页:
|
||||
|
||||
|
||||
|
||||
上面是我随便截了几张图片 如果你感兴趣的话可以去体验地址一趟 -> [体验地址](https://fairyever.gitee.io/d2-admin-preview/#/index) <-。
|
||||
|
||||
项目现在集成了不少的库和插件，第一次加载确实有些慢，以后有空了优化一下。
|
||||
|
||||
另外大家实际使用的时候建议使用 [简化版模板](https://github.com/d2-projects/d2-admin-start-kit)。
|
||||
|
||||
### 完整功能列表
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 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 +`
|
||||
* 持久化存储 `1.1.4 +`
|
||||
|
||||
### 更新列表
|
||||
|
||||
这个列表在这里也可以查看 -> [中文文档 | 更新日志](https://fairyever.gitee.io/d2-admin-doc/zh/guide/change-log.html#v1-1-0)
|
||||
|
||||
#### 1.1.4
|
||||
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 主题调优
|
||||
* [ 新增 ] playground 模块，方便测试和展示一些功能实现方式/调用方法
|
||||
* [ 新增 ] 灰度模式
|
||||
* [ 新增 ] 多页模式
|
||||
* [ 新增 ] 多页模式缓存
|
||||
* [ 新增 ] 多页模式快速关闭（关闭左侧 右侧 全部 其它）
|
||||
* [ 修改 ] 侧边栏滚动优化
|
||||
* [ 新增 ] `d2-container` 填充模式自定义滚动条
|
||||
* [ 新增 ] `d2-container` 组件卡片和隐形模式自定义滚动条
|
||||
* [ 新增 ] 现在页面标题可以根据路由做出对应变化了
|
||||
* [ 新增 ] 版本检查机制
|
||||
* [ 新增 ] `d2-container` 隐形模式支持 header 插槽
|
||||
* [ 新增 ] 版本检查可以设置为不显示提示框
|
||||
* [ 新增 ] 集成 json 查看组件
|
||||
* [ 新增 ] 添加了所有图表种类的演示页面
|
||||
* [ 修改 ] 修改布局方式，解决了在 Firefox 上 better-scroll 初始化拿不到正确高度的 bug
|
||||
* [ 新增 ] 右上角显示用户名，用户名持久存储
|
||||
|
||||
#### 1.1.3
|
||||
|
||||
* [ 修复 ] 侧边栏在折叠时不显示的 bug
|
||||
* [ 新增 ] v-charts 插件
|
||||
* [ 新增 ] 一些演示图表（后续打算把 v-charts 文档上有示例性的演示都展示一下）
|
||||
* [ 修改 ] D2Admin 经典主题颜色调整
|
||||
* [ 新增 ] violet 主题
|
||||
* [ 新增 ] 菜单图标
|
||||
* [ 修改 ] 新制作了 Fork me 图片
|
||||
|
||||
#### 1.1.2
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的依赖
|
||||
|
||||
#### 1.1.1
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的代码（移除图表库）
|
||||
* [ 优化 ] 侧边栏取值逻辑
|
||||
|
||||
#### 1.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 兼容性修复
|
||||
|
||||
写这篇文章的时候心情竟然出奇地平静，终于发新版了，总算松了一口气...
|
||||
|
||||
### 下阶段的计划：
|
||||
|
||||
* ice 版本
|
||||
* bug 修复
|
||||
|
||||
## 项目地址
|
||||
|
||||
| 地址 | 描述 |
|
||||
| --- | --- |
|
||||
| [团队主页](https://github.com/d2-projects) | D2Admin 所属的团队主页 |
|
||||
| [中文文档](http://app.d3collection.cn/d2-admin-doc/lastest/zh/) | 中文文档 |
|
||||
| [完整版 预览地址](https://fairyever.gitee.io/d2-admin-preview/#/index) | 完整版 预览地址 |
|
||||
| [完整版 github](https://github.com/d2-projects/d2-admin) | 完整版 Github 仓库 |
|
||||
| [完整版 码云](https://gitee.com/fairyever/d2-admin) | 完整版 码云镜像仓库 |
|
||||
| [简化版 预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index) | 简化版 预览地址 |
|
||||
| [简化版 github](https://github.com/d2-projects/d2-admin-start-kit) | 简化版 Github 仓库 |
|
||||
| [简化版 码云](https://gitee.com/fairyever/d2-admin-start-kit) | 简化版 码云镜像仓库 |
|
||||
|
||||
在最后，如果你看完了，并且觉得还不错，希望可以到 [项目主页](https://github.com/d2-projects/d2-admin) 上点一个 **star** 作为你对这个项目的认可与支持，谢谢。
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
c39dd2744731cdbb7ca0436209c2b12f1cc75c2b
|
||||
@@ -1 +0,0 @@
|
||||
059d7ed38ba9943cfc2ca9278ea5fe99432e18de
|
||||
@@ -1,226 +0,0 @@
|
||||
# D2Admin ICE 发布
|
||||
|
||||
# 可视化搭建前端工程 - 阿里飞冰了解一下
|
||||
|
||||
飞冰官方网站 [https://alibaba.github.io/ice](https://alibaba.github.io/ice)
|
||||
|
||||
每次新做一个项目，无论大小都要干这些事：
|
||||
|
||||
* 框架选型
|
||||
* 初始化脚手架（比如使用 **create-react-app** 或者 **vue-cli**）
|
||||
* 也可能你选择了开源脚手架，克隆仓库
|
||||
* 四处找轮子
|
||||
* 安装各种依赖
|
||||
* 新建页面，写逻辑
|
||||
* 设计菜单
|
||||
* 设计路由
|
||||
* 新建页面的时候去复制旧的页面修改
|
||||
* 把新的页面注册路由，注册菜单
|
||||
* 做完了这个页面做下个，新建文件，复制代码，注册路由...
|
||||
|
||||
**烦不烦？要优雅！**
|
||||
|
||||
今天介绍阿里的开源产品：[飞冰](https://alibaba.github.io/ice)
|
||||
|
||||
## 飞冰是什么
|
||||
|
||||
|
||||
|
||||
"海量可复用物料，通过 GUI 工具极速构建中后台应用"。
|
||||
|
||||
这句 slogan 还是非常准确的：
|
||||
|
||||
飞冰是一套综合解决方案，用来极速构建中后台应用（其实也可以做非中后台应用）。
|
||||
|
||||
可以做到极速是通过『海量可复用物料』和『GUI 开发工具』实现的。
|
||||
|
||||
使用飞冰的开发工作流是这样的：
|
||||
|
||||
`下载 GUI 工具并安装` => `可视化的选择我们提供的初始模板创建项目` => `可视化的创建页面并选择我们提供的 100+ 高质量可复用区块` => `生成代码进行二次开发` => `开发完成之后点击打包编译出 HTML、JS、CSS 文件` => `部署使用`
|
||||
|
||||
在整个流程中，你可以完全通过 GUI 工具点击操作，无需安装配置 Node 环境等前端开发工具，也无需配置 webpack 等构建脚本，我们已经按照淘宝前端最佳实践全部内置。此外，绝大部分的业务需求，我们都已经开发出对应的物料，可以通过 GUI 进行可视化的拼装，尽可能避免你去编写额外的业务逻辑。
|
||||
|
||||
### 物料源
|
||||
|
||||
下面是一张很长的图片，为了体积考虑这张图比较模糊，但是可以感受一下 ICE 的区块数量：
|
||||
|
||||
> 原始网页链接 [https://alibaba.github.io/ice/block](https://alibaba.github.io/ice/block)
|
||||
|
||||
|
||||
|
||||
目前为止 ICE 已经支持 react vue Angular 三大主流框架的物料资源
|
||||
|
||||
|
||||
|
||||
打比方我现在项目需要富文本编辑器，可以看到区块里提供了三款编辑器可供选择
|
||||
|
||||
|
||||
|
||||
所有的这些，都是使用 GUI 就可以加入到项目中使用的，下面将会展示如何从安装 iceworks 客户端到在项目中新建页面。
|
||||
|
||||
## 如何使用
|
||||
|
||||
### 安装
|
||||
|
||||
> 为了真实演示，特意删掉了以前安装的 app
|
||||
|
||||
演示系统为 macOS，iceworks 支持 Windows 版本。
|
||||
|
||||
iceworks 下载地址 [https://alibaba.github.io/ice/iceworks](https://alibaba.github.io/ice/iceworks)
|
||||
|
||||
|
||||
|
||||
稍微等待了一会儿，下载完成。安装后得到了这样一个 App：
|
||||
|
||||
|
||||
|
||||
### 上手
|
||||
|
||||
安装后打开看到一个很简单的界面：
|
||||
|
||||
|
||||
|
||||
切换到模板标签可以看到飞冰目前提供的脚手架列表：
|
||||
|
||||
|
||||
|
||||
区块标签可以看到区块列表
|
||||
|
||||
|
||||
|
||||
插件
|
||||
|
||||
|
||||
|
||||
设置
|
||||
|
||||
|
||||
|
||||
这就是表面上所有的功能，下面我们来建一个项目体验一下
|
||||
|
||||
### 新建 vue 项目
|
||||
|
||||
飞冰是从 react 开始做的，现在 vue 和 Angular 物料源还比较少，我们切换到 vue 选项卡里...
|
||||
|
||||
|
||||
|
||||
**是不是混进了什么奇怪的东西！**
|
||||
|
||||
|
||||
|
||||
没错，D2Admin 出了 ICE 版！
|
||||
|
||||
在我和阿里的开发者**一个月**的对接之后，D2Admin ICE 诞生了，作为飞冰平台上第一个**非官方 vue 脚手架**，D2Admin ICE 承担的希望还是很大的！下面使用这个脚手架做演示，展示如何**不写代码**建页面，**不写代码**出图表！
|
||||
|
||||
选择 D2Admin ICE 作为起始模板后会让我们填写项目保存地址：
|
||||
|
||||
|
||||
|
||||
填写完成后开始下载模板，下载后会提示我是否要立刻安装依赖：
|
||||
|
||||
|
||||
|
||||
为了避免动态图过大我没有录安装过程：
|
||||
|
||||
|
||||
|
||||
在写上面的时候已经提示我依赖安装完成了（很人性化有没有）：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ennn...没毛病。
|
||||
|
||||
### 启动项目
|
||||
|
||||
点击 `启动调试服务` 会在本地打开调试服务，vue 项目默认执行的是 `npm start`：
|
||||
|
||||
|
||||
|
||||
打开显示的链接，可以看到项目已经稳稳地跑起来了：
|
||||
|
||||
|
||||
|
||||
D2Admin ICE 实质上是 [d2-admin-start-kit](https://github.com/d2-projects/d2-admin-start-kit) 的特别版本，为适应 ICE 的逻辑修改了一部分代码，可以看到模板十分干净，没有了任何完整版的示例 demo：
|
||||
|
||||
|
||||
|
||||
关闭 ICE 内集成的终端后可以看到项目面板，可以显示出现在有哪些页面，安装了哪些依赖等：
|
||||
|
||||
|
||||
|
||||
### 新建页面
|
||||
|
||||
点击 `新建页面` 会打开新建页面界面：
|
||||
|
||||
|
||||
|
||||
随便选择一个区块新建一个页面（中间的等待时间是 iceworks 在从 npm 下载区块代码）
|
||||
|
||||
|
||||
|
||||
选择区块：
|
||||
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
下面尝试一下选择多个区块：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
自动生成了菜单：
|
||||
|
||||
|
||||
|
||||
页面效果：
|
||||
|
||||
|
||||
|
||||
检查一下自动生成的代码目录：
|
||||
|
||||
|
||||
|
||||
自动生成的页面组件：
|
||||
|
||||
|
||||
|
||||
自动生成的样式文件：
|
||||
|
||||
|
||||
|
||||
该有的都有了，不该有的也有了，连生命周期钩子都帮你写了一遍！
|
||||
|
||||
## 结语
|
||||
|
||||
演示一遍下来后，我生成了两个页面，没有写一行代码，剩下的操作就是修修改改，把多个页面都需要的组件提取一下，做做修改工作。
|
||||
|
||||
D2Admin 团队也会在以后的时间里尽力和 ICE 团队合作开发 vue 公用区块，加速 ICE 的 vue 生态建设，也希望众多的 vuer 都可以参与进来，平台有了，社区繁荣起来才是对大家都有利的事情。
|
||||
|
||||
D2Admin ICE 将会保持和 D2Admin Start Kit 一致更新，如果你看到完整版的 D2Admin 实在喜欢，从完整版做减法也未尝不可 :）
|
||||
|
||||
## D2 Projects
|
||||
|
||||
| 地址 | 描述 |
|
||||
| --- | --- |
|
||||
| [团队主页](https://github.com/d2-projects) | D2Admin 所属的团队主页 |
|
||||
| [中文文档](http://app.d3collection.cn/d2-admin-doc/lastest/zh/) | 中文文档 |
|
||||
| [D2Admin 完整版 预览地址](https://fairyever.gitee.io/d2-admin-preview/#/index) | 完整版 预览地址 |
|
||||
| [D2Admin 完整版 github](https://github.com/d2-projects/d2-admin) | 完整版 Github 仓库 |
|
||||
| [D2Admin 完整版 码云](https://gitee.com/fairyever/d2-admin) | 完整版 码云镜像仓库 |
|
||||
| [D2Admin 简化版 预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index) | 简化版 预览地址 |
|
||||
| [D2Admin 简化版 github](https://github.com/d2-projects/d2-admin-start-kit) | 简化版 Github 仓库 |
|
||||
| [D2Admin 简化版 码云](https://gitee.com/fairyever/d2-admin-start-kit) | 简化版 码云镜像仓库 |
|
||||
|
||||
开源项目组官方公众号
|
||||
|
||||
<img src="http://fairyever.qiniudn.com/20180801111123.jpg" style="width: 200px;"/>
|
||||
|
||||
[本文在项目文档中收录位置](http://app.d3collection.cn/d2-admin-doc/lastest/zh/article/update/ice-1.1.2.html)
|
||||
|
||||
在最后，如果你看完了，并且觉得还不错，希望可以到 [项目主页](https://github.com/d2-projects/d2-admin) 上点一个 **star** 作为你对这个项目的认可与支持，谢谢。
|
||||
@@ -1,25 +0,0 @@
|
||||
# D2 Admin 介绍
|
||||
|
||||
|
||||
|
||||
[D2Admin](https://github.com/d2-projects/d2-admin) 是一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计，提供了大量开箱即用的功能：
|
||||
|
||||
* 登录和注销的页面、逻辑、路由拦截
|
||||
* 主题系统
|
||||
* 基于 ElementUI 的优化外观
|
||||
* 表格 CRUD 封装 ([d2-crud](https://github.com/d2-projects/d2-crud))
|
||||
* 完善的页面容器组件，六种布局模式，具备顶栏和底栏插槽
|
||||
* 表格导入导出
|
||||
* 错误处理
|
||||
* 模拟数据
|
||||
* 集成字体图标库，以及即放即用的 svg 图标组件
|
||||
* 同类产品中最强大的出具持久化方案
|
||||
* 完善的多标签页用户控制
|
||||
* 完善的全局系统控制
|
||||
* 事无巨细的文档
|
||||
* 容纳 2000 人的 D2 Projects QQ 用户交流群解决使用问题 <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=6fd5a3ac1210fb60711d51068ec899a60a68de1b4185b44a20168d0beb33ff05">806395827</a>
|
||||
* ...
|
||||
|
||||
篇幅有限，更多特性请参考 [D2 Admin 中文文档 | 介绍](http://app.d3collection.cn/d2-admin-doc/lastest/zh/learn-guide/)
|
||||
|
||||
D2 Admin 在开源社区由 [FairyEver](https://github.com/FairyEver) 维护，为了方便开发者快速开发推出的 D2 Admin ICE 和完整版的 D2 Admin 有完全一致的系统功能。D2 Admin ICE 和其它分支同时更新，感谢大家使用。
|
||||
@@ -1,161 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 更新日志
|
||||
|
||||
## v1.2.0
|
||||
|
||||
* [ 修改 ] 新版首页
|
||||
* [ 新增 ] 全局状态管理模块化并且重新设计了 API
|
||||
* [ 新增 ] 全新的数据持久化 API
|
||||
* [ 新增 ] 数据持久化现在不仅仅支持区分用户，还可以区分路由
|
||||
* [ 新增 ] 路由快照功能
|
||||
* [ 新增 ] 文档重构
|
||||
* [ 新增 ] 菜单支持跳转到外部链接
|
||||
* [ 修改 ] bug 修复
|
||||
* [ 新增 ] 页面过渡动画设置加入全局状态管理并支持用户私有持久化
|
||||
* [ 新增 ] $logAdd 和 $log 快速记录日志和打印日志，并提供演示页面
|
||||
* [ 新增 ] 顶栏和侧边栏菜单支持 svg 图标
|
||||
|
||||
## v1.1.11
|
||||
|
||||
* [ 修改 ] 优化 v1.1.10 的更新代码
|
||||
* [ 修改 ] 修正版本号
|
||||
|
||||
## v1.1.10
|
||||
|
||||
* [ 修改 ] 修复了多标签页使用右侧菜单关闭时的报错
|
||||
|
||||
## v1.1.9
|
||||
|
||||
* [ 新增 ] 优化了多标签页数据持久化取值逻辑，现在修改路由信息后，刷新页面时数据从持久化存储取值时会多经过一部数据处理，根据 name 字段匹配新的路由数据
|
||||
* [ 新增 ] `d2adminUtilDb2VuexByUuid` 和 `d2adminUtilDb2Vuex` 新增第三个参数: handleFunction，该参数可以设置一个数据处理的回调函数，如果设置了该回调函数，在从持久化存储中取值时，如果成功取值，数据会首先经过该函数处理最后赋值到 store
|
||||
|
||||
## v1.1.8
|
||||
|
||||
* [ 新增 ] 增加了错误收集和日志收集功能
|
||||
* [ 新增 ] 增加了一个表格示例页面
|
||||
* [ 修改 ] bug 修复
|
||||
|
||||
## v1.1.7
|
||||
|
||||
* [ 修改 ] 多标签页右键菜单 bug 修复
|
||||
|
||||
## v1.1.6
|
||||
|
||||
* [ 新增 ] 新增加了多页控制组件 tab 按钮上的右键操作菜单，现在你可以在 D2Admin 中像使用浏览器一样操作多标签页
|
||||
|
||||
## v1.1.5
|
||||
|
||||
* [ 修改 ] vue-cli3 项目重构，目录调整
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 多标签页操作全部转移至 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)
|
||||
* [ 修改 ] 侧边栏和顶栏菜单数据控制转移到 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
|
||||
* [ 新增 ] 侧边栏折叠状态现在会根据用户区分记录，刷新页面保留之前的状态
|
||||
|
||||
## 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,14 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 参与者名单
|
||||
|
||||
| avatar | ID | Github |
|
||||
| :---: | --- | --- |
|
||||
| <img src="https://avatars1.githubusercontent.com/u/19357920?s=460&v=4" style="width: 30px;"/> | FairyEver | [https://github.com/FairyEver](https://github.com/FairyEver) |
|
||||
| <img src="https://avatars1.githubusercontent.com/u/24645480?s=460&v=4" style="width: 30px;"/> | sunhaoxiang | [https://github.com/sunhaoxiang](https://github.com/sunhaoxiang) |
|
||||
| <img src="https://avatars2.githubusercontent.com/u/11420885?s=460&v=4" style="width: 30px;"/> | namklaw | [https://github.com/namklaw](https://github.com/namklaw) |
|
||||
| <img src="https://avatars2.githubusercontent.com/u/6757507?s=460&v=4" style="width: 30px;"/> | mokeyjay | [https://github.com/mokeyjay](https://github.com/mokeyjay) |
|
||||
| <img src="https://avatars2.githubusercontent.com/u/10137653?s=460&v=4" style="width: 30px;"/> | Aysnine | [https://github.com/Aysnine](https://github.com/Aysnine) |
|
||||
| <img src="https://avatars2.githubusercontent.com/u/12825624?s=460&v=4" style="width: 30px;"/> | rongxingsun | [https://github.com/rongxingsun](https://github.com/rongxingsun) |
|
||||
@@ -1,6 +0,0 @@
|
||||
# 交流群
|
||||
|
||||
| QQ 交流群 | 作者微信 |
|
||||
| --- | --- |
|
||||
| <img src="./image/qq.jpg" style="width: 200px;"/> | <img src="./image/we.jpg" style="width: 200px;"/> |
|
||||
| QQ 群比交流比较活跃 建议加入 | 微信群大于 100 人后需要群主邀请加入 |
|
||||
@@ -1 +0,0 @@
|
||||
b27de32f6832b50dc5b8b1dc613060a81f88a8e9
|
||||
@@ -1 +0,0 @@
|
||||
12bb778e8779f32a46ee756e6dbb890024b40f5d
|
||||
@@ -1,5 +0,0 @@
|
||||
# 微信公众号
|
||||
|
||||
这是 D2 Projects 的官方公众号，我们会不定期推送技术文章和相关项目的更新信息。
|
||||
|
||||
<img src="./image/qr@2x.png" style="width: 172px;"/>
|
||||
@@ -1 +0,0 @@
|
||||
2ef12d88b2011063784c37f8b8490336503a5f88
|
||||
@@ -1,7 +0,0 @@
|
||||
# D2Admin ICE
|
||||
|
||||
飞冰官方网站 [https://alibaba.github.io/ice](https://alibaba.github.io/ice)
|
||||
|
||||
项目地址 [https://github.com/d2-projects/d2-admin-ice](https://github.com/d2-projects/d2-admin-ice)
|
||||
|
||||
使用方法见 [https://juejin.im/post/5b6349716fb9a04f834669d6](https://juejin.im/post/5b6349716fb9a04f834669d6)
|
||||
@@ -1,12 +0,0 @@
|
||||
# D2Admin 项目起始模板
|
||||
|
||||
项目地址 [https://github.com/d2-projects/d2-admin-start-kit](https://github.com/d2-projects/d2-admin-start-kit)
|
||||
|
||||
只保留了基础功能，例如
|
||||
|
||||
* 主题系统
|
||||
* 登录和注销
|
||||
* 数据持久化
|
||||
* 多标签页
|
||||
* 菜单和路由逻辑
|
||||
* ...
|
||||
@@ -1,48 +0,0 @@
|
||||
# D2 CRUD
|
||||
|
||||
## 介绍
|
||||
`D2-Crud`是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件，`D2-Crud`将 `Element` 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可根据配置的json实现，大大简化了开发流程。
|
||||
|
||||
## 功能
|
||||
- 继承了 Element 中表格所有功能
|
||||
- 新增表格数据
|
||||
- 修改表格数据
|
||||
- 删除表格数据
|
||||
- 使用 Element 中的组件渲染表格内容和表单内容
|
||||
- 表单校验
|
||||
- 表格内编辑
|
||||
|
||||
## 安装
|
||||
使用npm
|
||||
``` bash
|
||||
npm i element-ui @d2-projects/d2-crud -S
|
||||
```
|
||||
|
||||
使用yarn
|
||||
``` bash
|
||||
yarn add element-ui @d2-projects/d2-crud
|
||||
```
|
||||
|
||||
## 使用
|
||||
在`main.js`中写入以下内容：
|
||||
``` js
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import D2Crud from '@d2-projects/d2-crud'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(D2Crud)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
|
||||
之后就可以在项目中使用`D2-Crud`了。
|
||||
|
||||
## 文档
|
||||
[API](./api.md)
|
||||
|
||||
[使用示例](./example.md)
|
||||
@@ -1 +0,0 @@
|
||||
20469a4cf76ab7f4d3f7c89982745a0ffa8e84a8
|
||||
@@ -1,34 +0,0 @@
|
||||
# 示例
|
||||
|
||||
## 基础功能
|
||||
|
||||
| 示例 | 代码与演示 |
|
||||
| --- | --- |
|
||||
| 基础表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo1) |
|
||||
| 带斑马纹表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo2) |
|
||||
| 带边框表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo3) |
|
||||
| 带状态表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo4) |
|
||||
| 固定表头 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo5) |
|
||||
| 固定列 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo6) |
|
||||
| 流体高度 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo7) |
|
||||
| 多级表头 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo8) |
|
||||
| 单选 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo9) |
|
||||
| 多选 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo10) |
|
||||
| 排序 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo11) |
|
||||
| 筛选 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo12) |
|
||||
| 表尾合计行 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo13) |
|
||||
| 合并行 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo14) |
|
||||
| 合并列 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo15) |
|
||||
|
||||
## 数据操作
|
||||
|
||||
| 示例 | 代码与演示 |
|
||||
| --- | --- |
|
||||
| 新增数据 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo16) |
|
||||
| 修改数据 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo17) |
|
||||
| 删除数据 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo18) |
|
||||
| 自定义操作列 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo19) |
|
||||
| 表单组件渲染 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo20) |
|
||||
| 表单布局 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo21) |
|
||||
| 表单校验 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo22) |
|
||||
| 表格内编辑 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo23) |
|
||||
@@ -1,42 +0,0 @@
|
||||
# 使用指南
|
||||
|
||||
## 获取表格当前数据
|
||||
|
||||
可以通过 `ref` 拿到表格实时数据，也可以通过监听 `@d2-data-change` 事件来获取表格中数据
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleD2DataChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [],
|
||||
data: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.$refs.d2Crud.d2Data) // 获取表格数据
|
||||
},
|
||||
methods: {
|
||||
handleD2DataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 设置默认尺寸
|
||||
|
||||
在 `main.js` 使用 `D2Crud` 时传入 `size` 即可（可选值: `medium` `small` `mini`）
|
||||
``` js
|
||||
Vue.use(d2Crud, { size: 'small' })
|
||||
```
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
|
||||
|
||||
D2 Ribbons 是一套为开发者准备的开源社区绶带资源，你你可以下载图片到你的项目中使用或者直接使用仓库资源链接。
|
||||
|
||||
项目地址 [https://github.com/d2-projects/d2-ribbons](https://github.com/d2-projects/d2-ribbons)
|
||||
|
||||
## Features
|
||||
|
||||
* 扁平化风格
|
||||
* Github Gitlab Gitee 三套图标
|
||||
* 六色主题
|
||||
* 半透明 / 不透明样式
|
||||
* 文字 / 图标样式
|
||||
* @2x 资源
|
||||
* 统一尺寸（150 x 150 / 300 x 300 @2x）
|
||||
* 附带 Github 经典样式的绶带
|
||||
|
||||
## Story
|
||||
|
||||
> 我想了想究竟是预览放在前面还是介绍放在前面，最后我觉得应该先写东西，因为预览图太多了
|
||||
|
||||
萌生做这么一个项目是从做 [D2Admin](https://github.com/d2-projects/d2-admin) 的时候，我想给我的项目页面角落加一个 “Fork me on github”，然后我就找了几个开源项目想看看他们用的是什么图片，都不很理想，后来找到了 Github 官方的 ribbons，但是和我的项目风格不是很搭配，Github 官方的 ribbons 还是以前的拟物风格，我希望有一个比较“扁平化”的绶带放在上面，于是我就临时画了一个放上去了，长这个样子：
|
||||
|
||||
|
||||
|
||||
于是之后我就画了大概半天的事件，画了一套 ribbons 给以后用，自己用，也希望大家能用到，不仅有 github，还有 gitlab 和码云的版本，暂时只做了这些，以后有好的想法了再添加。
|
||||
|
||||
|
||||
|
||||
|
||||
> 所有的东西都出自一个程序员之手，没有经过专业的设计学习，请大家觉得丑的话轻喷
|
||||
|
||||
sketch 是我最喜欢的设计软件，推荐给大家。
|
||||
|
||||
在设计这套图片的时候我也尽量发挥了 sketch 的特性，比如颜色配置，公用样式，symbol等很好用的功能，这些都可以达到改一处动全部和事半功倍的效果。
|
||||
|
||||
下面放上效果预览：
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## How to use
|
||||
|
||||
没有固定的使用方法，都是图片，你可以下载下来用到你的项目里，或者直接使用本仓库的图片链接。每款绶带都有 @2x 版本
|
||||
|
||||
后续还会陆续更新其它的图片资源。
|
||||
|
||||
其实不论 github 还是码云，官方提供的都有类似的 ribbon，看个人喜好选择 D2 还是官方就好
|
||||
@@ -1,130 +0,0 @@
|
||||
# 介绍
|
||||
|
||||
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 仓库](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 ICE](https://alibaba.github.io/ice/scaffold?type=vue) |
|
||||
[介绍](https://juejin.im/post/5b6349716fb9a04f834669d6) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-ice-preview)
|
||||
|
||||
## 功能
|
||||
|
||||
* 使用 vue-cli3 构建
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 登录和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 简化剪贴板操作
|
||||
* 集成图表插件
|
||||
* 时间日期计算工具
|
||||
* 导入 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 +`
|
||||
* cookie 封装 `1.1.5 +`
|
||||
* 多标签页全局控制 API `1.1.5 +`
|
||||
* 菜单全局控制 API `1.1.5 +`
|
||||
* 多标签页关闭控制支持右键菜单 `1.1.10 +`
|
||||
* 模块化全局状态管理 `1.2.0 +`
|
||||
* 多种数据持久化方式：区分用户，区分路由，页面数据快照功能 `1.2.0 +`
|
||||
* 支持跳出外部链接的菜单系统 `1.2.0 +`
|
||||
* 支持菜单 svg 图标 `1.3.0 +`
|
||||
* 日志记录和错误捕捉 `1.3.0 +`
|
||||
* 全局菜单搜索 `1.3.0 +`
|
||||
* 登录重定向 `1.3.0 +`
|
||||
|
||||
## 目录结构
|
||||
|
||||
<pre style="padding: 0px; font-size: 12px;">
|
||||
├─ dev
|
||||
│ └─ snippets 帮助开发的代码片段
|
||||
├─ docs 文档
|
||||
├─ public 静态资源
|
||||
├─ src
|
||||
│ ├─ assets 资源
|
||||
│ ├─ components 组件
|
||||
│ ├─ i18n 多国语
|
||||
│ ├─ layout 布局
|
||||
│ ├─ libs 通用库
|
||||
│ ├─ menu 菜单
|
||||
│ ├─ mock 模拟数据
|
||||
│ ├─ pages 页面
|
||||
│ ├─ plugin 插件
|
||||
│ ├─ router 路由
|
||||
│ ├─ store 全局状态
|
||||
│ ├─ App.vue
|
||||
│ ├─ main.js
|
||||
│ └─ setting.js 设置
|
||||
├─ tests 单元测试
|
||||
├─ .env 环境变量
|
||||
├─ .env.development 环境变量 开发环境
|
||||
├─ .eslintignore
|
||||
├─ .eslintrc.js
|
||||
├─ .gitignore
|
||||
├─ .postcssrc.js
|
||||
├─ LICENSE
|
||||
├─ README.md
|
||||
├─ babel.config.js
|
||||
├─ jest.config.js
|
||||
├─ package.json
|
||||
└─ vue.config.js 配置文件
|
||||
</pre>
|
||||
|
||||
## Thanks
|
||||
|
||||
D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日正式发布，39天时间 star 突破 1k ，在此对所有的 D2Admin 支持者表示感谢，项目将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
|
||||
|
||||
—— 2018年7月5日
|
||||
|
||||
star 破 2k
|
||||
|
||||
—— 2018年8月7日
|
||||
@@ -1,246 +0,0 @@
|
||||
# 快速上手
|
||||
|
||||
本文将会带领您从 0 开始使用 D2Admin 创建下面的页面：
|
||||
|
||||
|
||||
|
||||
## 下载项目
|
||||
|
||||
* 完整版仓库 [Github](https://github.com/d2-projects/d2-admin) | [码云](https://gitee.com/fairyever/d2-admin)
|
||||
|
||||
* 简化版起始模板 [Github](https://github.com/d2-projects/d2-admin-start-kit) | [码云](https://gitee.com/fairyever/d2-admin-start-kit)
|
||||
|
||||
挑选一个您喜欢的网站 Fork 代码到您的仓库，然后下载或克隆。
|
||||
|
||||
::: tip
|
||||
如果使用 Github 下载过慢，请参考 [常见问题](/zh/question/)。
|
||||
:::
|
||||
|
||||
我的建议是使用 **简化版起始模板** 因为在完整版的基础上做减法，要比在简化版基础上做加法复杂。
|
||||
|
||||
下面的步骤都以简化版起始模板为基础演示如何使用。
|
||||
|
||||
下载完成后您会得到这些资源（以 1.1.5 版本为例）：
|
||||
|
||||
|
||||
|
||||
## 安装环境
|
||||
|
||||
::: tip
|
||||
如果您以前运行过 webpack 项目，并且本机 node 版本为 8，可以忽略这一步。
|
||||
:::
|
||||
|
||||
### node
|
||||
|
||||
在 [node.js 官网](https://nodejs.org/en/download/) 下载合适您系统的 node.js。
|
||||
|
||||
|
||||
|
||||
安装完毕后检查版本（最好使用 node 8 版本）。
|
||||
|
||||
```
|
||||
node -v
|
||||
v8.11.1
|
||||
npm -v
|
||||
5.6.0
|
||||
```
|
||||
|
||||
### nrm or cnpm
|
||||
|
||||
由于网络原因，npm 在国内使用比较慢，建议切换 npm 源到国内镜像。
|
||||
|
||||
有两种比较方便的方式切换您的 npm 源：
|
||||
|
||||
1. [nrm](https://www.npmjs.com/package/nrm) [ 建议 ]
|
||||
|
||||
安装：
|
||||
|
||||
```
|
||||
npm install -g nrm
|
||||
```
|
||||
|
||||
查看所有可用源：
|
||||
|
||||
```
|
||||
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
|
||||
skimdb -- https://skimdb.npmjs.com/registry
|
||||
```
|
||||
|
||||
切换源：
|
||||
|
||||
```
|
||||
nrm use taobao
|
||||
```
|
||||
|
||||
2. [cnpm](https://npm.taobao.org/)
|
||||
|
||||
安装：
|
||||
|
||||
```
|
||||
npm install -g cnpm --registry=https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
## 安装依赖
|
||||
|
||||
将终端切换到项目目录之后安装依赖：
|
||||
|
||||
```
|
||||
npm i
|
||||
```
|
||||
|
||||
如果遇到问题比如 node-sass 安装不上，请参考 [常见问题](/zh/question/)。
|
||||
|
||||
## 开发调试
|
||||
|
||||
在项目目录内启动项目：
|
||||
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
或者使用：
|
||||
|
||||
```
|
||||
npm start
|
||||
```
|
||||
|
||||
也可以使用 cli3 新推荐的命令：
|
||||
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
以上每种方式效果都是一样的，只是为了照顾不同人的习惯起了三个名字，实质上都是运行了 `vue-cli-service serve --open`。
|
||||
|
||||
成功运行后会显示登录界面：
|
||||
|
||||
|
||||
|
||||
## 新建页面
|
||||
|
||||
`src/pages` 目录是页面存放目录，在此目录下新建目录，例如 **page-demo**：
|
||||
|
||||
|
||||
|
||||
然后在文件夹内新建 **index.vue** 文件：
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
上面的代码生成了一个带有 header 和 footer 的页面，页面内容只有一句话，如果您好奇为什么这么写，可以参考 [页面容器](../sys-components/container.md)
|
||||
|
||||
|
||||
|
||||
## 设置路由
|
||||
|
||||
`src/router/routes.js` 是路由配置文件。
|
||||
|
||||
在 `frameIn` 变量最后添加：
|
||||
|
||||
``` js
|
||||
{
|
||||
path: '/page-demo',
|
||||
name: 'page-demo',
|
||||
component: () => import('@/pages/page-demo'),
|
||||
meta: { meta, title: '新建示例' }
|
||||
}
|
||||
```
|
||||
|
||||
最后 `frameIn` 变量应该是这样：
|
||||
|
||||
``` js {20-25}
|
||||
const frameIn = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: { name: 'index' },
|
||||
component: layoutHeaderAside,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'index',
|
||||
meta,
|
||||
component: () => import('@/pages/index')
|
||||
},
|
||||
// ...
|
||||
{
|
||||
path: '/page3',
|
||||
name: 'page3',
|
||||
component: () => import('@/pages/page3'),
|
||||
meta: { meta, title: '页面 3' }
|
||||
},
|
||||
{
|
||||
path: '/page-demo',
|
||||
name: 'page-demo',
|
||||
component: () => import('@/pages/page-demo'),
|
||||
meta: { meta, title: '新建示例' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 设置菜单
|
||||
|
||||
`src/menu` 目录是菜单存放目录，里面的两个文件分别存放顶栏和侧边栏的菜单。
|
||||
|
||||
::: tip
|
||||
D2Admin 现在将顶栏和侧边栏菜单分别存放然后赋值的逻辑只是一个最简单的演示，请根据您的需要自己修改菜变化逻辑，您可以只用一行代码就可以动态更新菜单，方法见 [vuex menu 模块](/zh/sys-vuex/#menu)。
|
||||
:::
|
||||
|
||||
打开 `src/menu/header.js` 添加新的菜单（高亮行）：
|
||||
|
||||
``` js {10}
|
||||
export default [
|
||||
{ path: '/index', title: '首页', icon: 'home' },
|
||||
{
|
||||
title: '页面',
|
||||
icon: 'folder-o',
|
||||
children: [
|
||||
{ path: '/page1', title: '页面 1' },
|
||||
{ path: '/page2', title: '页面 2' },
|
||||
{ path: '/page3', title: '页面 3' },
|
||||
{ path: '/page-demo', title: '新建示例' }
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
打开 `src/menu/aside.js` 添加新的菜单（高亮行）：
|
||||
|
||||
``` js {10}
|
||||
export default [
|
||||
{ path: '/index', title: '首页', icon: 'home' },
|
||||
{
|
||||
title: '页面',
|
||||
icon: 'folder-o',
|
||||
children: [
|
||||
{ path: '/page1', title: '页面 1' },
|
||||
{ path: '/page2', title: '页面 2' },
|
||||
{ path: '/page3', title: '页面 3' },
|
||||
{ path: '/page-demo', title: '新建示例' }
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 效果
|
||||
|
||||
经过上述步骤您得到了一个具有顶栏和底栏的页面，这个页面的入口在顶栏菜单和侧边栏菜单都会显示，并且打开此页面时浏览器 title 也会做出相应更新。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上述教程只是介绍了 D2Admin 的冰山一角，更多的配置项和组件文档请查阅本文档其它板块。
|
||||
@@ -1,53 +0,0 @@
|
||||
# 相关知识
|
||||
|
||||
使用 D2Admin 首先组要有以下前置知识：
|
||||
|
||||
* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/)
|
||||
* 会使用 [vue.js](https://cn.vuejs.org/)
|
||||
|
||||
如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手：
|
||||
|
||||
* [ES6](http://es6.ruanyifeng.com/)
|
||||
* [sass](https://www.sass.hk/guide/)
|
||||
|
||||
## 资源
|
||||
|
||||
下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
|
||||
|
||||
组件库：
|
||||
|
||||
* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)
|
||||
|
||||
项目基础：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 |
|
||||
| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 |
|
||||
| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 |
|
||||
| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 |
|
||||
|
||||
脚手架：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [vue-cli3](https://cli.vuejs.org/zh/) | 项目脚手架 |
|
||||
| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 |
|
||||
|
||||
插件：
|
||||
|
||||
| 名称 | 介绍 |
|
||||
| --- | --- |
|
||||
| [lodash](https://lodash.com/docs/4.17.10) | 一致性、模块化、高性能的 JavaScript 实用工具库 |
|
||||
| [axios](https://github.com/axios/axios) | 最流行的网络请求库 |
|
||||
| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../sys-components/container.md) 的自定义滚动条依赖 |
|
||||
| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 |
|
||||
| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 |
|
||||
| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 |
|
||||
| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 |
|
||||
| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 |
|
||||
| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 |
|
||||
| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 |
|
||||
| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 |
|
||||
|
||||
上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。
|
||||
@@ -1 +0,0 @@
|
||||
adaa3d23e2e5f38fc95922e6a324af247d104660
|
||||
@@ -1,3 +0,0 @@
|
||||
# 升级指引
|
||||
|
||||
D2Admin 自动发布以来一直保持每个月至少一次大升级的更新速度，在带来新的功能同时，不可避免地会对您的开发造成不便，本章将会指引您晚上您的项目升级。
|
||||
@@ -1,158 +0,0 @@
|
||||
# ICE 1.2.6 TO 1.2.7
|
||||
|
||||
> D2Admin ICE 1.2.6 是基于 D2Admin 1.1.5 版本简化而来。
|
||||
|
||||
> D2Admin ICE 1.2.7 是基于 D2Admin 1.2.0 版本简化而来。
|
||||
|
||||
D2Admin 1.1.5 - 1.2.0 之间修复了一些之前的错误，有一些小的功能改进，也有较大的升级。新功能介绍见 [《D2Admin 8月更新: 高级数据持久化|标签页右键|模块化等》](https://juejin.im/post/5b7d9640f265da436631a5a7)
|
||||
|
||||
::: tip 旧版文档
|
||||
如果您暂时不想升级到新版本，旧版本文档会一直为您保留，[文档地址](http://app.d3collection.cn/d2-admin-doc/1.1.11/zh/)
|
||||
:::
|
||||
|
||||
## 如何升级
|
||||
|
||||
### 备份旧项目
|
||||
|
||||
首先将您的旧项目整体复制一份到其它位置，防止修改失败丢失文件。
|
||||
|
||||
### 下载新版本 D2Admin ICE
|
||||
|
||||
初始化成功后您应该有两个项目：
|
||||
|
||||
|
||||
|
||||
### 移动页面文件
|
||||
|
||||
如果您使用飞冰创建的页面，您的业务页面应该在 pages 目录下，例如下图中的 page6 文件夹：
|
||||
|
||||
|
||||
|
||||
将您的业务代码文件全部转移至新版项目的 pages 目录：
|
||||
|
||||
|
||||
|
||||
### 更新路由和菜单
|
||||
|
||||
将旧版本中的 menuConfig.js 和 routerConfig.js 移动到新项目中的同样位置，替换新版本初始化时的默认文件：
|
||||
|
||||
|
||||
|
||||
移动到新文件夹：
|
||||
|
||||
|
||||
|
||||
选择替换已有文件：
|
||||
|
||||
|
||||
|
||||
### 更新 package.json
|
||||
|
||||
由于您之前的项目中会使用一些区块，区块在创建在您的项目里时会自动在 package.json 文件中新增相关依赖，现在您需要手动将这些依赖添加到新的项目中：
|
||||
|
||||
|
||||
|
||||
::: tip
|
||||
lodash.uniqueid 这个插件不需要添加到新的项目中，新项目中全量引入了 lodash
|
||||
:::
|
||||
|
||||
### 重新安装依赖
|
||||
|
||||
|
||||
|
||||
### 启动新的项目
|
||||
|
||||
重新安装依赖完成后启动新的项目，即完成了旧项目的升级工作。
|
||||
|
||||
|
||||
|
||||
## 特殊情况
|
||||
|
||||
如果您修改了包含但不仅限于以下文件时，您需要注意将您以前的修改更新至新的项目：
|
||||
|
||||
* pages 目录下的首页和登录页面
|
||||
* 公用样式和主题
|
||||
* HeaderAside 布局组件
|
||||
* store
|
||||
|
||||
## store 更新说明
|
||||
|
||||
此版本对 store 文件夹下的设置进行了拆分：
|
||||
|
||||
旧版的 d2admin 模块所有代码写在了一个文件中：
|
||||
|
||||
|
||||
|
||||
导致这个模块看起来足够混乱以至于在修改某些功能时很不容易找到相关的代码。
|
||||
|
||||
新版的 D2Admin ICE 针对这部分做了优化，将这个模块根据功能进行了拆分：
|
||||
|
||||
|
||||
|
||||
这样在您需要修改某些功能时可以更快速地找到对应的代码位置。但是相应而来的是模块中的方法在调用时的方法都发生了变化，以登录为例：
|
||||
|
||||
旧版（示例）：
|
||||
|
||||
``` vue {5-14}
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
methods: {
|
||||
...mapActions([
|
||||
'd2adminLogin'
|
||||
]),
|
||||
submit () {
|
||||
this.d2adminLogin({
|
||||
vm: this,
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
新版（示例）：
|
||||
|
||||
``` vue {5-14}
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
methods: {
|
||||
...mapActions('d2admin/account', [
|
||||
'login'
|
||||
]),
|
||||
submit () {
|
||||
this.login({
|
||||
vm: this,
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
::: tip 规律
|
||||
在调用 vuex D2Admin 系统模块时，无论是直接操作还是使用：
|
||||
|
||||
* `mapState`
|
||||
* `mapActions`
|
||||
* `mapMutations`
|
||||
|
||||
都要注意现在的方法和数据都根据功能模块化了，如果您之前业务代码中使用了相关的数据和方法，请注意。
|
||||
:::
|
||||
|
||||
## 数据持久化更新说明
|
||||
|
||||
旧版的数据持久化文档 [VUEX 实用工具](http://app.d3collection.cn/d2-admin-doc/1.1.11/zh/plugins/vuex.html)
|
||||
|
||||
新版的数据持久化更加强大，文档见 [数据持久化](http://app.d3collection.cn/d2-admin-doc/lastest/zh/sys-db/)
|
||||
|
||||
请在业务代码中注意将您使用的数据持久化方法升级。
|
||||
|
||||
## 需要帮助
|
||||
|
||||
[交流群](/zh/communication-group-chat/)
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 借鉴 D2Admin 的项目
|
||||
|
||||
以下开源项目中借鉴了 D2Admin 代码。
|
||||
|
||||
本页面不明确指出哪些是借鉴哪些是抄袭，由读者自行判断。
|
||||
|
||||
本页面作用是指明哪些东西是 D2Admin 原创的，避免大家看到和其它项目有类似设计时发生误会以为 D2 抄袭他人（误会发生过）。
|
||||
|
||||
::: tip
|
||||
图片右键在新标签页打开查看大图
|
||||
:::
|
||||
|
||||
**此页面截图都会标注日期，只新增，不删除，只代表当时日期的状态**
|
||||
|
||||
## nx-admin
|
||||
|
||||
[https://github.com/mgbq/nx-admin](https://github.com/mgbq/nx-admin)
|
||||
|
||||
### 2018年7月29日
|
||||
|
||||
* 项目首页已经放置 D2Admin 链接
|
||||
|
||||
| D2Admin | nx-admin |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
## avue
|
||||
|
||||
[https://github.com/nmxiaowei/avue](https://github.com/nmxiaowei/avue)
|
||||
|
||||
### 2018年7月29日
|
||||
|
||||
* 项目首页已经放置 D2Admin 链接
|
||||
|
||||
| D2Admin | avue |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
@@ -1 +0,0 @@
|
||||
114aef8d02807a0d61dc8bdf937087eeed027e33
|
||||
@@ -1,195 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 异步请求
|
||||
|
||||
D2Admin 使用 [axios](https://github.com/axios/axios) 作为异步请求工具，并做了一些封装。
|
||||
|
||||
| axios | 地址 |
|
||||
| --- | --- |
|
||||
| Github | [https://github.com/axios/axios](https://github.com/axios/axios) |
|
||||
| npm | [https://www.npmjs.com/package/axios](https://www.npmjs.com/package/axios) |
|
||||
| 中文文档 | [https://www.kancloud.cn/yunye/axios/234845](https://www.kancloud.cn/yunye/axios/234845) |
|
||||
|
||||
## 介绍
|
||||
|
||||
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
|
||||
|
||||
* 支持浏览器和node.js
|
||||
* 支持promise
|
||||
* 能拦截请求和响应
|
||||
* 能转换请求和响应数据
|
||||
* 能取消请求
|
||||
* 自动转换JSON数据
|
||||
* 浏览器端支持防止CSRF(跨站请求伪造)
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
 |  |  |  |  |  |
|
||||
--- | --- | --- | --- | --- | --- |
|
||||
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
|
||||
|
||||
[](https://saucelabs.com/u/axios)
|
||||
|
||||
## 使用方式
|
||||
|
||||
axios 默认的使用方式在这里不做介绍，D2Admin 推荐在您的项目中使用下面的方式获取数据：
|
||||
|
||||
### 设置接口地址
|
||||
|
||||
默认的请求地址在 `d2-admin/.env`
|
||||
|
||||
```
|
||||
VUE_APP_API=/api/
|
||||
```
|
||||
|
||||
上述设置将在您访问 `/demo/a` 时实际去访问 `/api/demo/a`
|
||||
|
||||
### 区分不同环境设置接口地址
|
||||
|
||||
如果您希望不同的环境使用不同的请求地址，可以在 `d2-admin/.env.development` 中添加设置（示例）：
|
||||
|
||||
```
|
||||
VUE_APP_API=/api-dev/
|
||||
```
|
||||
|
||||
这样您在开发环境和正式环境就有了不同的公共请求地址，在开发环境访问 `/demo/a` 时实际去访问 `/api-dev/demo/a`
|
||||
|
||||
### 通用配置
|
||||
|
||||
您在开始使用 D2Admin 开发您的项目之前，应该首先修改 `d2-admin/src/plugin/axios/index.js` 下的设置。
|
||||
|
||||
默认的设置需要遵循下面的数据返回格式约定：
|
||||
|
||||
``` js
|
||||
{
|
||||
// 和后台约定的状态码
|
||||
code: 0,
|
||||
// 后台返回请求状态信息
|
||||
msg: '返回信息',
|
||||
// data 内才是真正的返回数据
|
||||
data: {
|
||||
list: [
|
||||
...
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
在响应拦截器中处理完数据后将会返回：
|
||||
|
||||
``` js
|
||||
{
|
||||
list: [
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 业务错误
|
||||
|
||||
当发生错误时返回的数据示例：
|
||||
|
||||
``` js
|
||||
{
|
||||
// 和后台约定的状态码
|
||||
code: 'unlogin',
|
||||
// 后台返回请求状态信息
|
||||
msg: '用户没有登录'
|
||||
}
|
||||
```
|
||||
|
||||
如果针对某个错误指定处理方法，应该在响应拦截器中加入对应的代码：
|
||||
|
||||
``` js
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
// 成功返回数据，在这里判断和后台约定的状态标识
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### http 错误
|
||||
|
||||
如果需要针对某个 http 错误指定处理方法，应该在响应拦截器中第二个参数中添加对应的代码。
|
||||
|
||||
``` js
|
||||
service.interceptors.response.use(
|
||||
response => {},
|
||||
error => {
|
||||
// 发生 http 错误，在这里判断状态码
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### 不返回 code
|
||||
|
||||
在默认的设置中，如果您的接口没有返回 code 字段，将不会进行状态（非 http 状态，而是和后台约定好的状态类型）判断，直接返回 axios 请求返回的数据。
|
||||
|
||||
例如接口返回如下数据：
|
||||
|
||||
``` js
|
||||
{
|
||||
list: [
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
在响应拦截器中判断该接口没有返回 code 字段，将会直接将返回：
|
||||
|
||||
``` js
|
||||
{
|
||||
list: [
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 设计 API
|
||||
|
||||
假设您有一个返回数据的 API 接口，想访问它，您首先应该在 `d2-admin/src/api` 文件夹内创建合适的文件目录，例如：`d2-admin/src/api/demo/business/table/1/index.js`，这个文件中应该导出一个或者多个请求：
|
||||
|
||||
``` js
|
||||
import request from '@/plugin/axios'
|
||||
|
||||
export function BusinessTable1List (data) {
|
||||
return request({
|
||||
url: '/demo/business/table/1',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 使用 API 获取数据
|
||||
|
||||
在上面的步骤中创建了 API 文件，您应该在页面中这样使用：
|
||||
|
||||
``` vue
|
||||
<script>
|
||||
import { BusinessTable1List } from '@/api/demo/business/table/1'
|
||||
export default {
|
||||
methods: {
|
||||
handleSubmit (form) {
|
||||
BusinessTable1List({
|
||||
name: ''
|
||||
})
|
||||
.then(res => {
|
||||
// 返回数据
|
||||
})
|
||||
.catch(err => {
|
||||
// 异常情况
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
而不是在页面中直接调用 axios。
|
||||
|
||||
::: tip
|
||||
虽然没有强制规定，请注意您的 API 文件夹结构规律性
|
||||
:::
|
||||
@@ -1 +0,0 @@
|
||||
1ad656c02671d6f1ab2e1bb10adfd45f48f96abc
|
||||
@@ -1,3 +0,0 @@
|
||||
# 组件
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
@@ -1,15 +0,0 @@
|
||||
# v-charts
|
||||
|
||||
图表组件
|
||||
|
||||
::: tip
|
||||
`1.1.0` 版本使用的是 `G2` 图表库，`1.1.3` 开始使用 `v-charts`
|
||||
:::
|
||||
|
||||
## 介绍
|
||||
|
||||
在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。
|
||||
|
||||
[v-charts 文档](https://v-charts.js.org/#/)
|
||||
|
||||
处于对用户使用方便的角度考虑，从 `1.1.3` 开始使用 v-charts。项目中已经安装并注册完毕 v-charts，你可以直接使用
|
||||
@@ -1 +0,0 @@
|
||||
a9e6a61590987cd12d1cdfbc28bdf44fae14da06
|
||||
@@ -1,31 +0,0 @@
|
||||
# d2-count-up
|
||||
|
||||
数字动画组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| start | 起始值 | 非 | Number | | 0 |
|
||||
| end | 结束值 | 是 | Number | | 0 |
|
||||
| decimals | 小数位数 | 非 | Number | | 0 |
|
||||
| duration | 持续时间 | 非 | Number | | 2 |
|
||||
| options | 设置项 | 非 | Object | | 空对象 |
|
||||
| callback | 回调函数 | 非 | Function | | 空函数 |
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
// 基本使用方法
|
||||
<d2-count-up :end="100"/>
|
||||
|
||||
// 设置始末值
|
||||
<d2-count-up :start="14" :end="100"/>
|
||||
|
||||
// 设置动画时间
|
||||
<d2-count-up :end="100" :decimals="2"/>
|
||||
```
|
||||
|
||||
组件会在页面上渲染 `<span>` 标签
|
||||
|
||||
组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
|
||||
@@ -1,300 +0,0 @@
|
||||
# d2-highlight
|
||||
|
||||
代码高亮显示组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| code | 代码字符串 | 非 | String | | |
|
||||
| format-html | 是否格式化 HTML | 非 | Boolean | | false |
|
||||
| lang | 首选语言 | 非 | String | | |
|
||||
|
||||
::: tip
|
||||
format 建议只在内容为 HTML 的时候打开，如果内容不是 HTML，设置为 true 会有负面效果
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
<d2-highlight code="alert('Hello')"/>
|
||||
```
|
||||
|
||||
::: tip
|
||||
本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
|
||||
:::
|
||||
|
||||
## 语言
|
||||
|
||||
如果不指定语言，默认会依次尝试以下语言：
|
||||
|
||||
1. html
|
||||
2. javascript
|
||||
3. json
|
||||
4. css
|
||||
5. scss
|
||||
6. less
|
||||
|
||||
如果指定语言，将会首先尝试根据指定的语言解析。全部支持的语言：
|
||||
|
||||
* 1c
|
||||
* abnf
|
||||
* accesslog
|
||||
* actionscript
|
||||
* ada
|
||||
* apache
|
||||
* applescript
|
||||
* cpp
|
||||
* arduino
|
||||
* armasm
|
||||
* xml
|
||||
* asciidoc
|
||||
* aspectj
|
||||
* autohotkey
|
||||
* autoit
|
||||
* avrasm
|
||||
* awk
|
||||
* axapta
|
||||
* bash
|
||||
* basic
|
||||
* bnf
|
||||
* brainfuck
|
||||
* cal
|
||||
* capnproto
|
||||
* ceylon
|
||||
* clean
|
||||
* clojure
|
||||
* clojure-repl
|
||||
* cmake
|
||||
* coffeescript
|
||||
* coq
|
||||
* cos
|
||||
* crmsh
|
||||
* crystal
|
||||
* cs
|
||||
* csp
|
||||
* css
|
||||
* d
|
||||
* markdown
|
||||
* dart
|
||||
* delphi
|
||||
* diff
|
||||
* django
|
||||
* dns
|
||||
* dockerfile
|
||||
* dos
|
||||
* dsconfig
|
||||
* dts
|
||||
* dust
|
||||
* ebnf
|
||||
* elixir
|
||||
* elm
|
||||
* ruby
|
||||
* erb
|
||||
* erlang-repl
|
||||
* erlang
|
||||
* excel
|
||||
* fix
|
||||
* flix
|
||||
* fortran
|
||||
* fsharp
|
||||
* gams
|
||||
* gauss
|
||||
* gcode
|
||||
* gherkin
|
||||
* glsl
|
||||
* go
|
||||
* golo
|
||||
* gradle
|
||||
* groovy
|
||||
* haml
|
||||
* handlebars
|
||||
* haskell
|
||||
* haxe
|
||||
* hsp
|
||||
* htmlbars
|
||||
* http
|
||||
* hy
|
||||
* inform7
|
||||
* ini
|
||||
* irpf90
|
||||
* java
|
||||
* javascript
|
||||
* jboss-cli
|
||||
* json
|
||||
* julia
|
||||
* julia-repl
|
||||
* kotlin
|
||||
* lasso
|
||||
* ldif
|
||||
* leaf
|
||||
* less
|
||||
* lisp
|
||||
* livecodeserver
|
||||
* livescript
|
||||
* llvm
|
||||
* lsl
|
||||
* lua
|
||||
* makefile
|
||||
* mathematica
|
||||
* matlab
|
||||
* maxima
|
||||
* mel
|
||||
* mercury
|
||||
* mipsasm
|
||||
* mizar
|
||||
* perl
|
||||
* mojolicious
|
||||
* monkey
|
||||
* moonscript
|
||||
* n1ql
|
||||
* nginx
|
||||
* nimrod
|
||||
* nix
|
||||
* nsis
|
||||
* objectivec
|
||||
* ocaml
|
||||
* openscad
|
||||
* oxygene
|
||||
* parser3
|
||||
* pf
|
||||
* php
|
||||
* pony
|
||||
* powershell
|
||||
* processing
|
||||
* profile
|
||||
* prolog
|
||||
* protobuf
|
||||
* puppet
|
||||
* purebasic
|
||||
* python
|
||||
* q
|
||||
* qml
|
||||
* r
|
||||
* rib
|
||||
* roboconf
|
||||
* routeros
|
||||
* rsl
|
||||
* ruleslanguage
|
||||
* rust
|
||||
* scala
|
||||
* scheme
|
||||
* scilab
|
||||
* scss
|
||||
* shell
|
||||
* smali
|
||||
* smalltalk
|
||||
* sml
|
||||
* sqf
|
||||
* sql
|
||||
* stan
|
||||
* stata
|
||||
* step21
|
||||
* stylus
|
||||
* subunit
|
||||
* swift
|
||||
* taggerscript
|
||||
* yaml
|
||||
* tap
|
||||
* tcl
|
||||
* tex
|
||||
* thrift
|
||||
* tp
|
||||
* twig
|
||||
* typescript
|
||||
* vala
|
||||
* vbnet
|
||||
* vbscript
|
||||
* vbscript-html
|
||||
* verilog
|
||||
* vhdl
|
||||
* vim
|
||||
* x86asm
|
||||
* xl
|
||||
* xquery
|
||||
* zephir
|
||||
|
||||
## 主题
|
||||
|
||||
* agate
|
||||
* androidstudio
|
||||
* arduino-light
|
||||
* arta
|
||||
* ascetic
|
||||
* atelier-cave-dark
|
||||
* atelier-cave-light
|
||||
* atelier-dune-dark
|
||||
* atelier-dune-light
|
||||
* atelier-estuary-dark
|
||||
* atelier-estuary-light
|
||||
* atelier-forest-dark
|
||||
* atelier-forest-light
|
||||
* atelier-heath-dark
|
||||
* atelier-heath-light
|
||||
* atelier-lakeside-dark
|
||||
* atelier-lakeside-light
|
||||
* atelier-plateau-dark
|
||||
* atelier-plateau-light
|
||||
* atelier-savanna-dark
|
||||
* atelier-savanna-light
|
||||
* atelier-seaside-dark
|
||||
* atelier-seaside-light
|
||||
* atelier-sulphurpool-dark
|
||||
* atelier-sulphurpool-light
|
||||
* atom-one-dark
|
||||
* atom-one-light
|
||||
* brown-paper
|
||||
* brown-papersq.png
|
||||
* codepen-embed
|
||||
* color-brewer
|
||||
* darcula
|
||||
* dark
|
||||
* darkula
|
||||
* default
|
||||
* docco
|
||||
* dracula
|
||||
* far
|
||||
* foundation
|
||||
* github-gist
|
||||
* github
|
||||
* googlecode
|
||||
* grayscale
|
||||
* gruvbox-dark
|
||||
* gruvbox-light
|
||||
* hopscotch
|
||||
* hybrid
|
||||
* idea
|
||||
* ir-black
|
||||
* kimbie.dark
|
||||
* kimbie.light
|
||||
* magula
|
||||
* mono-blue
|
||||
* monokai-sublime
|
||||
* monokai
|
||||
* obsidian
|
||||
* ocean
|
||||
* paraiso-dark
|
||||
* paraiso-light
|
||||
* pojoaque
|
||||
* pojoaque.jpg
|
||||
* purebasic
|
||||
* qtcreator_dark
|
||||
* qtcreator_light
|
||||
* railscasts
|
||||
* rainbow
|
||||
* routeros
|
||||
* school-book
|
||||
* school-book.png
|
||||
* solarized-dark
|
||||
* solarized-light
|
||||
* sunburst
|
||||
* tomorrow-night-blue
|
||||
* tomorrow-night-bright
|
||||
* tomorrow-night-eighties
|
||||
* tomorrow-night
|
||||
* tomorrow
|
||||
* vs
|
||||
* vs2015
|
||||
* xcode
|
||||
* xt256
|
||||
* zenburn
|
||||
@@ -1,14 +0,0 @@
|
||||
# d2-icon-select
|
||||
|
||||
图标选择器组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value | 绑定的值，可以使用 v-model | 非 | String | | |
|
||||
| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 |
|
||||
| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
|
||||
| clearable | 是否允许清空 | 非 | Boolean | | true |
|
||||
| userInput | 是否允许用户自由输入 | 非 | Boolean | | false |
|
||||
| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true |
|
||||
@@ -1,36 +0,0 @@
|
||||
# d2-icon-svg
|
||||
|
||||
SVG 图标组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 |
|
||||
|
||||
## 使用方法
|
||||
|
||||
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
|
||||
|
||||
然后使用组件
|
||||
|
||||
``` vue
|
||||
<d2-icon-svg name="刚才的svg文件名"/>
|
||||
```
|
||||
|
||||
## 获取已经注册的所有图标
|
||||
|
||||
你已经发现了，只需要将图标文件放入项目中就会自动注册
|
||||
|
||||
这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
|
||||
|
||||
所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
|
||||
|
||||
``` js
|
||||
// 在 vue 单文件组件中
|
||||
console.log(this.$IconSvg)
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
|
||||
@@ -1,43 +0,0 @@
|
||||
# d2-icon
|
||||
|
||||
图标组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
||||
|
||||
## 使用方法
|
||||
|
||||
基本
|
||||
|
||||
``` vue
|
||||
// 这样用没有毛病 但是也没什么用
|
||||
<d2-icon/>
|
||||
|
||||
// 指定图标名称
|
||||
<d2-icon name="github"/>
|
||||
|
||||
// 设置行内样式
|
||||
<d2-icon name="github" style="font-size: 100px;"/>
|
||||
|
||||
// 设置 class
|
||||
<d2-icon name="github" class="icon-class-demo"/>
|
||||
```
|
||||
|
||||
这个组件只是简化了写法而已
|
||||
|
||||
``` vue
|
||||
<d2-icon name="github"/>
|
||||
// 等同于
|
||||
<i class="fa fa-github" aria-hidden="true"></i>
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
图标索引
|
||||
|
||||
[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
||||
|
||||
[fontawesome.com](https://fontawesome.com/icons?d=gallery)
|
||||
@@ -1 +0,0 @@
|
||||
3a5bb0f2628d9251bbe7474c0535258784cf770b
|
||||
@@ -1,90 +0,0 @@
|
||||
# d2-markdown
|
||||
|
||||
markdown 渲染器组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | markdown文件地址 | 非 | String | | 无 |
|
||||
| source | markdown内容 | 非 | String | | 无 |
|
||||
| highlight | 代码高亮 | 非 | Boolean | | false |
|
||||
| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true |
|
||||
|
||||
## 使用方法
|
||||
|
||||
加载一个.md文件
|
||||
|
||||
``` vue
|
||||
<d2-markdown url="/static/md/xxxx.md"/>
|
||||
```
|
||||
|
||||
加载资源
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const doc = `
|
||||
# Header
|
||||
|
||||
## title
|
||||
|
||||
text`.trim()
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
D2Admin 已经帮你配置好 webpack，你可以使用以下方式加载 markdown 文件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 百度网盘分享链接优化
|
||||
|
||||
当书写类似下面的分享链接时
|
||||
|
||||
::: tip
|
||||
需要 `baidupan = true`
|
||||
:::
|
||||
|
||||
```
|
||||
普通分享链接
|
||||
|
||||
> https://pan.baidu.com/s/1kW6uUwB
|
||||
|
||||
私密分享链接
|
||||
|
||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||
```
|
||||
|
||||
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示，效果见下
|
||||
|
||||
|
||||
|
||||
::: tip
|
||||
了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/d2-projects/d2-admin/blob/master/src/components/core/d2-markdown/index.vue)
|
||||
:::
|
||||
@@ -1,107 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# CSS 实用类
|
||||
|
||||
## 样式
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-card` | 使 el-card 组件样式跟随主题变化 |
|
||||
|
||||
* `.d2-card` 示例
|
||||
|
||||
``` vue
|
||||
<el-card shadow="never" class="d2-card">
|
||||
<template slot="header">header</template>
|
||||
body
|
||||
</el-card>
|
||||
<!-- 快看 我的边框和 header 边框会随着主题切换样式！ -->
|
||||
```
|
||||
|
||||
## 文字
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-text-center` | 文字水平居中 |
|
||||
|
||||
## 浮动
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-fl` | 左浮动 |
|
||||
| `.d2-fr` | 右浮动 |
|
||||
| `.d2-clearfix` | 清除浮动 |
|
||||
|
||||
## 边距
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-m-0` | 外边距 0px |
|
||||
| `.d2-mt-0` | 上外边距 0px |
|
||||
| `.d2-mr-0` | 右外边距 0px |
|
||||
| `.d2-mb-0` | 下外边距 0px |
|
||||
| `.d2-ml-0` | 左外边距 0px |
|
||||
| `.d2-p-0` | 内边距 0px |
|
||||
| `.d2-pt-0` | 上内边距 0px |
|
||||
| `.d2-pr-0` | 右内边距 0px |
|
||||
| `.d2-pb-0` | 下内边距 0px |
|
||||
| `.d2-pl-0` | 左内边距 0px |
|
||||
| `.d2-m-5` | 外边距 5px |
|
||||
| `.d2-mt-5` | 上外边距 5px |
|
||||
| `.d2-mr-5` | 右外边距 5px |
|
||||
| `.d2-mb-5` | 下外边距 5px |
|
||||
| `.d2-ml-5` | 左外边距 5px |
|
||||
| `.d2-p-5` | 内边距 5px |
|
||||
| `.d2-pt-5` | 上内边距 5px |
|
||||
| `.d2-pr-5` | 右内边距 5px |
|
||||
| `.d2-pb-5` | 下内边距 5px |
|
||||
| `.d2-pl-5` | 左内边距 5px |
|
||||
| `.d2-m-10` | 外边距 10px |
|
||||
| `.d2-mt-10` | 上外边距 10px |
|
||||
| `.d2-mr-10` | 右外边距 10px |
|
||||
| `.d2-mb-10` | 下外边距 10px |
|
||||
| `.d2-ml-10` | 左外边距 10px |
|
||||
| `.d2-p-10` | 内边距 10px |
|
||||
| `.d2-pt-10` | 上内边距 10px |
|
||||
| `.d2-pr-10` | 右内边距 10px |
|
||||
| `.d2-pb-10` | 下内边距 10px |
|
||||
| `.d2-pl-10` | 左内边距 10px |
|
||||
| `.d2-m-15` | 外边距 15px |
|
||||
| `.d2-mt-15` | 上外边距 15px |
|
||||
| `.d2-mr-15` | 右外边距 15px |
|
||||
| `.d2-mb-15` | 下外边距 15px |
|
||||
| `.d2-ml-15` | 左外边距 15px |
|
||||
| `.d2-p-15` | 内边距 15px |
|
||||
| `.d2-pt-15` | 上内边距 15px |
|
||||
| `.d2-pr-15` | 右内边距 15px |
|
||||
| `.d2-pb-15` | 下内边距 15px |
|
||||
| `.d2-pl-15` | 左内边距 15px |
|
||||
| `.d2-m-20` | 外边距 20px |
|
||||
| `.d2-mt-20` | 上外边距 20px |
|
||||
| `.d2-mr-20` | 右外边距 20px |
|
||||
| `.d2-mb-20` | 下外边距 20px |
|
||||
| `.d2-ml-20` | 左外边距 20px |
|
||||
| `.d2-p-20` | 内边距 20px |
|
||||
| `.d2-pt-20` | 上内边距 20px |
|
||||
| `.d2-pr-20` | 右内边距 20px |
|
||||
| `.d2-pb-20` | 下内边距 20px |
|
||||
| `.d2-pl-20` | 左内边距 20px |
|
||||
|
||||
## 边距简写
|
||||
|
||||
20px 设定为通用边距 可以如下简写
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-m` | 外边距 20px |
|
||||
| `.d2-mt` | 上外边距 20px |
|
||||
| `.d2-mr` | 右外边距 20px |
|
||||
| `.d2-mb` | 下外边距 20px |
|
||||
| `.d2-ml` | 左外边距 20px |
|
||||
| `.d2-p` | 内边距 20px |
|
||||
| `.d2-pt` | 上内边距 20px |
|
||||
| `.d2-pr` | 右内边距 20px |
|
||||
| `.d2-pb` | 下内边距 20px |
|
||||
| `.d2-pl` | 左内边距 20px |
|
||||
@@ -1 +0,0 @@
|
||||
d63b89fe44d535e03d67942af51925a8edae8dd8
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 菜单
|
||||
|
||||
D2Admin 的顶栏菜单和侧边栏菜单相互独立互不影响。
|
||||
|
||||
## 数据源
|
||||
|
||||
顶栏数据使用 `$store.state.d2admin.menu.header` 作为数据源。[API](../sys-vuex/#state-header)
|
||||
|
||||
侧栏数据使用 `$store.state.d2admin.menu.aside` 作为数据源。[API](../sys-vuex/#state-aside)
|
||||
|
||||
## 设置菜单
|
||||
|
||||
顶栏使用 `$store.commit('d2admin/menu/headerSet', menu)` 更新数据源。[API](../sys-vuex/#mutations-headerset)
|
||||
|
||||
侧栏使用 `$store.commit('d2admin/menu/asideSet', menu)` 更新数据源。[API](../sys-vuex/#mutations-asideset)
|
||||
|
||||
menu 的数据格式见 [menu 数据格式](../sys-vuex/#mutations-headerset)
|
||||
|
||||
## 菜单联动
|
||||
|
||||
首先请明确一点，D2Admin 完整版的菜单联动只是一个简单方案，不要拘泥于此演示，下面介绍完整版联动的实现帮助您更快速实现自己的联动方案：
|
||||
|
||||
设置数据源
|
||||
|
||||
在 `d2-admin/src/menu/index.js` 中导出了两个变量，分别是：
|
||||
|
||||
* menuAside 预备侧边栏菜单
|
||||
* menuHeader 顶栏菜单
|
||||
|
||||
在 main.js 中使用下面的方式导入
|
||||
|
||||
``` js
|
||||
import { menuHeader, menuAside } from '@/menu'
|
||||
```
|
||||
|
||||
menuHeader 在初始化根实例时在 created 生命周期直接赋值给顶栏菜单
|
||||
|
||||
``` js
|
||||
this.$store.commit('d2admin/menu/headerSet', menuHeader)
|
||||
```
|
||||
|
||||
然后在根实例中添加 $route.matched 的监听器
|
||||
|
||||
``` js
|
||||
watch: {
|
||||
'$route.matched' (val) {
|
||||
const _side = menuAside.filter(menu => menu.path === val[0].path)
|
||||
this.$store.commit('d2admin/menu/asideSet', _side.length > 0 ? _side[0].children : [])
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这段代码的作用是当路由改变时，根据当前的路由找到 menuAside 中匹配当前路由对象中顶级路由的那个项目，并且赋值给侧边栏菜单达到联动效果。
|
||||
|
||||
您可以删除这部分代码，随意使用 vuex 中提供的顶栏和侧边栏菜单的设置方法来实现自己的菜单联动。
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 多页面
|
||||
|
||||
D2Admin 默认支持多页面，并且支持多页面控制器上的 tab 标签页右键菜单控制，可以实现“关闭全部”，“关闭其它”，“关闭左侧”，“关闭右侧”的功能。
|
||||
|
||||
## 注册页面
|
||||
|
||||
D2Admin 的多页面设置源头在 `d2-admin/src/router/routes.js`，该文件导出了一个 `frameInRoutes` 变量，`d2-admin/src/main.js` 中使用下面的方式导入：
|
||||
|
||||
``` js
|
||||
import { frameInRoutes } from '@/router/routes'
|
||||
```
|
||||
|
||||
然后在根实例中加入了一个名为 `getAllPageFromRoutes` 的方法，该方法在 `created` 生命周期调用，递归处理 `frameInRoutes` 中的数据将支持多标签页显示所有页面数据扁平为一位数组，然后使用：
|
||||
|
||||
``` js
|
||||
$store.commit('d2admin/page/poolSet', pool)
|
||||
```
|
||||
将得到的路由数据存储到 vuex 中备用。这份数据在操作多页面数据时会使用到。
|
||||
|
||||
## 触发
|
||||
|
||||
新建页面的触发在 `d2-admin/src/router/index.js` 中的 `router.afterEach` 钩子中。涉及的方法参见 [API](../sys-vuex/#page)
|
||||
|
||||
## 标签页控制
|
||||
|
||||
标签页组件在 `d2-admin/src/layout/header-aside/components/tabs/index.vue`，该组件实现多页面的各种关闭控制。涉及的方法参见 [API](../sys-vuex/#page)
|
||||
@@ -1,7 +0,0 @@
|
||||
# 插件概述
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
|
||||
::: tip
|
||||
这里只列出一部分需要特别说明的插件，大部分集成的插件都可以在网络上找到官方文档
|
||||
:::
|
||||
@@ -1,51 +0,0 @@
|
||||
# 控制台打印优化
|
||||
|
||||
使用 $log 可以在控制台输出美观的日志信息
|
||||
|
||||
<img src="http://fairyever.qiniudn.com/20180821133308.png" style="width: 260px; border: 1px solid #eaecef;"/>
|
||||
|
||||
## 胶囊
|
||||
|
||||
此方法打印一行“胶囊”样式的信息，即上图前四条
|
||||
|
||||
**参数：**
|
||||
|
||||
$log.capsule( `左侧文字`, `右侧文字`, `主题样式` )
|
||||
|
||||
**示例：**
|
||||
|
||||
``` js
|
||||
this.$log.capsule('title', 'success', 'success')
|
||||
```
|
||||
|
||||
## 彩色文字
|
||||
|
||||
此方法可以随意组合打印文字的颜色顺序
|
||||
|
||||
``` js
|
||||
this.$log.colorful([
|
||||
{ text: 'H', type: 'default' },
|
||||
{ text: 'e', type: 'primary' },
|
||||
{ text: 'l', type: 'success' },
|
||||
{ text: 'l', type: 'warning' },
|
||||
{ text: 'o', type: 'danger' }
|
||||
])
|
||||
```
|
||||
|
||||
上面的代码效果为效果图中第五行
|
||||
|
||||
## 快速方法
|
||||
|
||||
* $log.default
|
||||
* $log.primary
|
||||
* $log.success
|
||||
* $log.warning
|
||||
* $log.danger
|
||||
|
||||
**示例：**
|
||||
|
||||
``` js
|
||||
this.$log.primary('primary style')
|
||||
```
|
||||
|
||||
这五个快速方法的效果为效果图中第六至十行
|
||||
@@ -1,148 +0,0 @@
|
||||
# 表格导出
|
||||
|
||||
本框架集成了数据导出功能，并包装成插件
|
||||
|
||||
## 注册插件
|
||||
|
||||
``` js
|
||||
import pluginExport from '@/plugin/export'
|
||||
Vue.use(pluginExport)
|
||||
```
|
||||
|
||||
之后就可以在组件中使用 `this.$export` 来调用导出功能
|
||||
|
||||
::: tip
|
||||
d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
|
||||
:::
|
||||
|
||||
## 导出 csv
|
||||
|
||||
此方法将数据以 `csv` 格式导出，并且返回一个 `Promise` 对象
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
this.$export.csv({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
.then(() => {
|
||||
// ...可选回调
|
||||
})
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| columns | 列 | 非 | Array | | 空数组 |
|
||||
| data | 行数据 | 非 | Array | | 空数组 |
|
||||
| title | 文件名 | 非 | String | | table |
|
||||
| noHeader | 不导出表头 | 非 | Boolean | | false |
|
||||
| separator | 数据分隔符 | 非 | String | | , |
|
||||
| quoted | 每项数据是否加引号 | 非 | Boolean | | false |
|
||||
|
||||
示例
|
||||
|
||||
``` js
|
||||
const columns = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
prop: 'age'
|
||||
}
|
||||
]
|
||||
const data = [
|
||||
{
|
||||
name: 'lucy',
|
||||
age: 24
|
||||
},
|
||||
{
|
||||
name: 'bob',
|
||||
age: 26
|
||||
}
|
||||
]
|
||||
this.$export.csv({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
```
|
||||
|
||||
## 导出 xlsx
|
||||
|
||||
此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
this.$export.excel({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
.then(() => {
|
||||
// ...可选回调
|
||||
})
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| columns | 列 | 非 | Array | | 空数组 |
|
||||
| data | 行数据 | 非 | Array | | 空数组 |
|
||||
| title | 文件名 | 非 | String | | table |
|
||||
|
||||
示例
|
||||
|
||||
``` js
|
||||
const columns = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
prop: 'age'
|
||||
}
|
||||
]
|
||||
const data = [
|
||||
{
|
||||
name: 'lucy',
|
||||
age: 24
|
||||
},
|
||||
{
|
||||
name: 'bob',
|
||||
age: 26
|
||||
}
|
||||
]
|
||||
this.$export.excel({
|
||||
columns,
|
||||
data
|
||||
})
|
||||
```
|
||||
|
||||
## 导出 txt
|
||||
|
||||
此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
this.$export.txt({
|
||||
text: '文本内容',
|
||||
title: '文件名'
|
||||
})
|
||||
.then(() => {
|
||||
// ...可选回调
|
||||
})
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| text | 文件内容 | 非 | String | | 空 |
|
||||
| title | 文件名 | 非 | String | | 文本 |
|
||||
@@ -1,64 +0,0 @@
|
||||
# 表格导入
|
||||
|
||||
本框架集成了数据导入功能，并包装成插件
|
||||
|
||||
## 注册插件
|
||||
|
||||
``` js
|
||||
import pluginImport from '@/plugin/import'
|
||||
Vue.use(pluginImport)
|
||||
```
|
||||
|
||||
之后就可以在组件中使用 `this.$import` 来调用导出功能
|
||||
|
||||
::: tip
|
||||
d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
|
||||
:::
|
||||
|
||||
## 导入 csv
|
||||
|
||||
导入csv文件，并且返回一个 `Promise` 对象
|
||||
|
||||
``` js
|
||||
// 在选择文件后调用
|
||||
handleUpload (file) {
|
||||
this.$import.csv(file)
|
||||
.then(res => {
|
||||
this.table.columns = Object.keys(res.data[0]).map(e => ({
|
||||
label: e,
|
||||
prop: e
|
||||
}))
|
||||
this.table.data = res.data
|
||||
})
|
||||
// 阻止默认的上传
|
||||
return false
|
||||
}
|
||||
```
|
||||
|
||||
## 导入 xlsx
|
||||
|
||||
导入xlsx文件，并且返回一个 `Promise` 对象
|
||||
|
||||
**注意 导入的表格文件第一行应为表头**
|
||||
|
||||
参考下述示例使用
|
||||
|
||||
``` js
|
||||
// 在选择文件后调用
|
||||
handleUpload (file) {
|
||||
this.$import.xlsx(file)
|
||||
.then(({header, results}) => {
|
||||
// header 为表头
|
||||
// results 为内容
|
||||
this.table.columns = header.map(e => {
|
||||
return {
|
||||
label: e,
|
||||
prop: e
|
||||
}
|
||||
})
|
||||
this.table.data = results
|
||||
})
|
||||
// 阻止默认的上传
|
||||
return false
|
||||
}
|
||||
```
|
||||
@@ -1,13 +0,0 @@
|
||||
# 错误捕捉
|
||||
|
||||
框架内已经做好错误捕捉处理，您不需要任何设置，当发生一个错误时，错误会被自动记录在日志中，并且在控制台显示相关错误信息。
|
||||
|
||||
日志查看界面：
|
||||
|
||||
|
||||
|
||||
控制台输出：
|
||||
|
||||
> 只在开发模式下输出
|
||||
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
# 多国语
|
||||
|
||||
多国语插件
|
||||
|
||||
::: tip
|
||||
此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
|
||||
:::
|
||||
|
||||
公用的语言设置建议放在 `src/i18n` 下
|
||||
|
||||
i18n 文件夹结构如下所示
|
||||
|
||||
```
|
||||
|__index.js // 主文件
|
||||
|__lang // 语言配置文件夹
|
||||
| |__cn // 中文
|
||||
| | |__index.js // 中文 公用配置
|
||||
| |__ja // 日语
|
||||
| | |__index.js // 日语 公用配置
|
||||
| |__en // 英语
|
||||
| | |__index.js // 英语 公用配置
|
||||
```
|
||||
|
||||
在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
|
||||
|
||||
``` js
|
||||
import i18n from './i18n'
|
||||
new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
i18n, // 使用 i18n
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
})
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
使用 `$t('路径')`
|
||||
|
||||
``` vue
|
||||
<PageHeader
|
||||
slot="header"
|
||||
:title="`${$t('pub.pageHeader.demo')} 1`"
|
||||
url="http://kazupon.github.io/vue-i18n/en/">
|
||||
</PageHeader>
|
||||
```
|
||||
|
||||
## 局部配置
|
||||
|
||||
有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱，不易维护
|
||||
|
||||
`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
|
||||
|
||||
示例
|
||||
|
||||
``` vue
|
||||
<i18n src="./lang.json"></i18n>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-tag>{{$t('hello')}}</el-tag>
|
||||
<p>{{$t('check.title')}}</p>
|
||||
<el-checkbox-group v-model="check">
|
||||
<el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
|
||||
<el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
|
||||
<el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
check: ['a', 'b']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
在同一文件夹下的 `lang.json`
|
||||
|
||||
``` json
|
||||
{
|
||||
"cn": {
|
||||
"hello": "你好",
|
||||
"check": {
|
||||
"title": "请选择",
|
||||
"label": {
|
||||
"Beijing": "北京",
|
||||
"Tokyo": "东京",
|
||||
"NewYork": "纽约"
|
||||
}
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"hello": "hello",
|
||||
"check": {
|
||||
"title": "Please choose",
|
||||
"label": {
|
||||
"Beijing": "Beijing",
|
||||
"Tokyo": "Tokyo",
|
||||
"NewYork": "NewYork"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ja": {
|
||||
"hello": "こんにちは",
|
||||
"check": {
|
||||
"title": "選択してください",
|
||||
"label": {
|
||||
"Beijing": "北京",
|
||||
"Tokyo": "東京",
|
||||
"NewYork": "ニューヨーク"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
详细教程请查看官方文档，见此页右上角的链接
|
||||
@@ -1,17 +0,0 @@
|
||||
# 日志
|
||||
|
||||
使用 $logAdd 可以快速记录日志
|
||||
|
||||
示例：
|
||||
|
||||
|
||||
|
||||
查看日志：
|
||||
|
||||
|
||||
|
||||
使用方式：
|
||||
|
||||
``` js
|
||||
this.$logAdd('your log text')
|
||||
```
|
||||
@@ -1,221 +0,0 @@
|
||||
# 模拟数据
|
||||
|
||||
使用模拟数据可以在接口还没做好的时候更方便地进行你的开发
|
||||
|
||||
## 使用
|
||||
|
||||
``` js
|
||||
import Mock from 'mockjs'
|
||||
|
||||
Mock.mock('/api/demo/001', {
|
||||
'list|4-10': [{
|
||||
'id|+1': 1,
|
||||
'name': '@CNAME',
|
||||
'star|1-5': '★',
|
||||
'delFlag|1': [0, 1],
|
||||
'creatDate': '@DATE',
|
||||
'address': '@CITY',
|
||||
'zip': '@ZIP'
|
||||
}]
|
||||
})
|
||||
```
|
||||
|
||||
请求数据
|
||||
|
||||
``` js
|
||||
ajax () {
|
||||
this.$axios.get('/api/demo/001')
|
||||
.then(res => {
|
||||
this.table.columns = Object.keys(res.data.list[0]).map(e => ({
|
||||
label: e,
|
||||
prop: e
|
||||
}))
|
||||
this.table.data = res.data.list
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## mock 语法规范
|
||||
|
||||
Mock.js 的语法规范包括两部分：
|
||||
|
||||
1. 数据模板定义规范（Data Template Definition，DTD）
|
||||
2. 数据占位符定义规范（Data Placeholder Definition，DPD）
|
||||
|
||||
### 数据模板定义规范 DTD
|
||||
|
||||
**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：**
|
||||
|
||||
``` js
|
||||
// 属性名 name
|
||||
// 生成规则 rule
|
||||
// 属性值 value
|
||||
'name|rule': value
|
||||
```
|
||||
|
||||
**注意：**
|
||||
|
||||
* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。
|
||||
* _生成规则_ 是可选的。
|
||||
* _生成规则_ 有 7 种格式：
|
||||
1. `'name|min-max': value`
|
||||
1. `'name|count': value`
|
||||
1. `'name|min-max.dmin-dmax': value`
|
||||
1. `'name|min-max.dcount': value`
|
||||
1. `'name|count.dmin-dmax': value`
|
||||
1. `'name|count.dcount': value`
|
||||
1. `'name|+step': value`
|
||||
* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
|
||||
* _属性值_ 中可以含有 `@占位符`。
|
||||
* _属性值_ 还指定了最终值的初始值和类型。
|
||||
|
||||
<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
|
||||
|
||||
**生成规则和示例：**
|
||||
|
||||
#### 1. 属性值是字符串 **String**
|
||||
|
||||
1. `'name|min-max': string`
|
||||
|
||||
通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。
|
||||
|
||||
2. `'name|count': string`
|
||||
|
||||
通过重复 `string` 生成一个字符串，重复次数等于 `count`。
|
||||
|
||||
#### 2. 属性值是数字 **Number**
|
||||
|
||||
1. `'name|+1': number`
|
||||
|
||||
属性值自动加 1，初始值为 `number`。
|
||||
|
||||
2. `'name|min-max': number`
|
||||
|
||||
生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
|
||||
|
||||
3. `'name|min-max.dmin-dmax': number`
|
||||
|
||||
生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
|
||||
|
||||
``` js
|
||||
Mock.mock({
|
||||
'number1|1-100.1-10': 1,
|
||||
'number2|123.1-10': 1,
|
||||
'number3|123.3': 1,
|
||||
'number4|123.10': 1.123
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"number1": 12.92,
|
||||
"number2": 123.51,
|
||||
"number3": 123.777,
|
||||
"number4": 123.1231091814
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. 属性值是布尔型 **Boolean**
|
||||
|
||||
1. `'name|1': boolean`
|
||||
|
||||
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
|
||||
|
||||
2. `'name|min-max': value`
|
||||
|
||||
随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
|
||||
|
||||
#### 4. 属性值是对象 **Object**
|
||||
|
||||
1. `'name|count': object`
|
||||
|
||||
从属性值 `object` 中随机选取 `count` 个属性。
|
||||
|
||||
2. `'name|min-max': object`
|
||||
|
||||
从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
|
||||
|
||||
#### 5. 属性值是数组 **Array**
|
||||
|
||||
1. `'name|1': array`
|
||||
|
||||
从属性值 `array` 中随机选取 1 个元素，作为最终值。
|
||||
|
||||
2. `'name|+1': array`
|
||||
|
||||
从属性值 `array` 中顺序选取 1 个元素，作为最终值。
|
||||
|
||||
3. `'name|min-max': array`
|
||||
|
||||
通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。
|
||||
|
||||
4. `'name|count': array`
|
||||
|
||||
通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
|
||||
|
||||
#### 6. 属性值是函数 **Function**
|
||||
|
||||
1. `'name': function`
|
||||
|
||||
执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
|
||||
|
||||
#### 7. 属性值是正则表达式 **RegExp**
|
||||
|
||||
1. `'name': regexp`
|
||||
|
||||
根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
|
||||
|
||||
``` js
|
||||
Mock.mock({
|
||||
'regexp1': /[a-z][A-Z][0-9]/,
|
||||
'regexp2': /\w\W\s\S\d\D/,
|
||||
'regexp3': /\d{5,10}/
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"regexp1": "pJ7",
|
||||
"regexp2": "F)\fp1G",
|
||||
"regexp3": "561659409"
|
||||
}
|
||||
```
|
||||
|
||||
### 数据占位符定义规范 DPD
|
||||
|
||||
_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
|
||||
|
||||
_占位符_ 的格式为：
|
||||
|
||||
```
|
||||
@占位符
|
||||
@占位符(参数 [, 参数])
|
||||
```
|
||||
|
||||
**注意：**
|
||||
|
||||
1. 用 `@` 来标识其后的字符串是 _占位符_。
|
||||
2. _占位符_ 引用的是 `Mock.Random` 中的方法。
|
||||
3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。
|
||||
4. _占位符_ 也可以引用 _数据模板_ 中的属性。
|
||||
5. _占位符_ 会优先引用 _数据模板_ 中的属性。
|
||||
6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。
|
||||
|
||||
``` js
|
||||
Mock.mock({
|
||||
name: {
|
||||
first: '@FIRST',
|
||||
middle: '@FIRST',
|
||||
last: '@LAST',
|
||||
full: '@first @middle @last'
|
||||
}
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"name": {
|
||||
"first": "Charles",
|
||||
"middle": "Brenda",
|
||||
"last": "Lopez",
|
||||
"full": "Charles Brenda Lopez"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 路由
|
||||
|
||||
## 数据
|
||||
|
||||
完整版的 D2Admin 路由设置文件在 `d2-admin/src/router/routes.js`。
|
||||
|
||||
需要注意的是大多数路由设置要写在 frameIn 下。frameIn 中的页面会在嵌套在一个包含顶栏和侧边栏的页面布局中显示。
|
||||
|
||||
## 路由配置
|
||||
|
||||
路由注册和钩子设置文件为 `d2-admin/src/router/index.js`，此文件中将 `routes.js` 中导出的 routes 变量注册到路由，并且设置后续的路由拦截和登录状态判断，多页面的新建页面事件触发也来自这里。该文件再导出注册了所有页面的路由实例，在 `main.js` 中注册到 vue 根实例。
|
||||
|
||||
## 路由缓存
|
||||
|
||||
路由缓存默认为开启状态，页面组件会被 keepAlive，如果想禁用某个页面的缓存，请在该路由配置的 meta 中加入：
|
||||
|
||||
``` js
|
||||
meta: {
|
||||
notCache: true
|
||||
}
|
||||
```
|
||||
|
||||
最后结果类似这样：
|
||||
|
||||
``` js {7}
|
||||
{
|
||||
path: '/page-cache/off',
|
||||
name: 'page-cache-off',
|
||||
component: () => import('xxx.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
notCache: true,
|
||||
title: '关闭缓存'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
虽然所有的路由默认都是开启缓存的，但是还需要遵守一个约定才可以正确缓存页面：
|
||||
|
||||
**页面组件必须有 name 字段，并且 name 字段的值和该路由的 name 字段一致。**
|
||||
|
||||
例如：
|
||||
|
||||
页面文件：
|
||||
|
||||
``` vue {9}
|
||||
<template>
|
||||
<d2-container>
|
||||
Hello World
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page-cache-on'
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
路由设置：
|
||||
|
||||
``` js {3}
|
||||
{
|
||||
path: '/page-cache/on',
|
||||
name: 'page-cache-on',
|
||||
component: () => import('xxx.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: '开启缓存'
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,203 +0,0 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Util 实用工具
|
||||
|
||||
D2Admin 的 util 模块位置：`d2-admin/src/libs/util.js`
|
||||
|
||||
## util.cookies.set
|
||||
|
||||
**介绍：**
|
||||
|
||||
存储 cookie 值
|
||||
|
||||
**参数**
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 名称 | 必选 | String | | |
|
||||
| value | 值 | 必选 | String | | |
|
||||
| setting | 设置 | 必选 | Object | [js-cookie](https://github.com/js-cookie/js-cookie#readme) | `{ expires: 1 }` |
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
util.cookies.set({
|
||||
name: 'name',
|
||||
value: 'value',
|
||||
setting: {
|
||||
expires: 365
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**为什么不直接使用 cookie：**
|
||||
|
||||
util.cookies 内部使用 js-cookie 进行操作，并且在 cookie 名称上多做了一层逻辑封装，例如
|
||||
|
||||
``` js
|
||||
util.cookies.set({
|
||||
name: 'name',
|
||||
value: 'value',
|
||||
setting: {
|
||||
expires: 365
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
实际存储的 cookie 是
|
||||
|
||||
`d2admin-${version}-name` : `value`
|
||||
|
||||
使用
|
||||
|
||||
``` js
|
||||
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 时无论赋值还是取值，都觉察不出这层包装
|
||||
|
||||
::: tip
|
||||
不止 cookie 这样，db 的存储逻辑也会自动根据版本区分
|
||||
:::
|
||||
|
||||
## util.cookies.get
|
||||
|
||||
**介绍：**
|
||||
|
||||
拿到 cookie 值
|
||||
|
||||
**参数**
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 名称 | 必选 | String | | |
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
const data = util.cookies.get('name')
|
||||
```
|
||||
|
||||
## util.cookies.getAll
|
||||
|
||||
**介绍：**
|
||||
|
||||
拿到 cookie 全部的值
|
||||
|
||||
**参数**
|
||||
|
||||
无
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
const data = util.cookies.getAll()
|
||||
```
|
||||
|
||||
## util.cookies.remove
|
||||
|
||||
**介绍：**
|
||||
|
||||
删除 cookie
|
||||
|
||||
**参数**
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 名称 | 必选 | String | | |
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
util.cookies.remove('name')
|
||||
```
|
||||
|
||||
## util.title
|
||||
|
||||
**介绍：**
|
||||
|
||||
更新标题
|
||||
|
||||
**参数**
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| titleText | title 名称 | 必选 | String | | |
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
util.title('NewTitle')
|
||||
```
|
||||
|
||||
结果：**`${process.env.VUE_APP_TITLE}` | NewTitle**
|
||||
|
||||
::: tip
|
||||
`process.env.VUE_APP_TITLE` 在 `d2-admin/.env` 和 `d2-admin/.env.development` 中设置
|
||||
:::
|
||||
|
||||
## util.open
|
||||
|
||||
**介绍：**
|
||||
|
||||
打开新页面
|
||||
|
||||
**参数**
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | 新的页面地址 | 必选 | String | | |
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
util.open('http://www.xxx.com')
|
||||
```
|
||||
|
||||
## util.ua
|
||||
|
||||
**介绍：**
|
||||
|
||||
获取所有的 UA 信息
|
||||
|
||||
**参数**
|
||||
|
||||
无
|
||||
|
||||
**使用示例：**
|
||||
|
||||
``` js
|
||||
const ua = util.ua()
|
||||
```
|
||||
|
||||
结果示例
|
||||
|
||||
``` js
|
||||
{
|
||||
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: {}
|
||||
}
|
||||
```
|
||||
@@ -1 +0,0 @@
|
||||
6d4aa6cc303e3b98207e4c93036136d1f15ed3da
|
||||
@@ -8,9 +8,7 @@
|
||||
"dev": "vue-cli-service serve --open",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint --fix",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"doc:dev": "vuepress dev docs",
|
||||
"doc:build": "vuepress build docs"
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@d2-projects/d2-crud": "^1.0.2",
|
||||
|
||||
Reference in New Issue
Block a user