no message
Former-commit-id: 5c8be8a85b0cba2a1e1e89ea72c8ac59087df61d [formerly e491df6b119dd8da11efb95abb874662933081a0] [formerly 5c8be8a85b0cba2a1e1e89ea72c8ac59087df61d [formerly e491df6b119dd8da11efb95abb874662933081a0] [formerly 5c8be8a85b0cba2a1e1e89ea72c8ac59087df61d [formerly e491df6b119dd8da11efb95abb874662933081a0] [formerly e491df6b119dd8da11efb95abb874662933081a0 [formerly 731aaa1eab6bea292c3246c1fcc6d154bcf6d2f2 [formerly 19ce0ba792ec5592397d7cf6686984be7a25e13f]]]]] Former-commit-id: 9f29fe6a9ba6d0a52a7f67e479d1f2cb7b1546b4 Former-commit-id: c6add3f6ad0f1d68250c6706dceafea380023838 Former-commit-id: 88152175823504d5841a89a5c1ae8a4b8a4714d4 [formerly 21979818846cf1375188a7528f95de56121f1d86] Former-commit-id: 7022a178ed883532fa196eb75f62fa06fe35330c Former-commit-id: 989add9a5aec12f7318f90473ccaab49eb6524f7 Former-commit-id: caed0f3751abb43abe3b531408f406c7bd4b23a1 Former-commit-id: 2b8f548a46d5a241f6602a240b27d56104ad66d2 Former-commit-id: ea94c865ded4988f3af665cc5d82d0bfa38228df
This commit is contained in:
liyang
156
docs/zh/learn-guide/README.md
Normal file
156
docs/zh/learn-guide/README.md
Normal file
@@ -0,0 +1,156 @@
|
||||
# 介绍
|
||||
|
||||
D2Admin 是一个开源的管理系统前端集成方案
|
||||
|
||||
<div>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
本项目仓库在 Github 和 Gitee 同步发布
|
||||
|
||||
[中文文档](http://d2admin.fairyever.com/zh/)
|
||||
|
||||
**完整版**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-preview)
|
||||
|
||||
**简化版模板**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin-start-kit) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin-start-kit) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index)
|
||||
|
||||
D2Admin 完整版集成了很多的插件和组件，首次加载会占用很多的时间，所以加入了首屏加载动画。
|
||||
|
||||
如果您欣赏 D2Admin 的设计风格，希望基于它开发您的管理系统，**建议使用 [d2-admin-start-kit 简化模板](https://github.com/d2-projects/d2-admin-start-kit)**，简化版模板保留了所有的系统功能，包括登陆注销，主题切换，图标，数据持久化等。其它不必要的组件和插件您可以参照 D2Admin 完整版自行加入。
|
||||
|
||||
如果您执意在完整版基础上开发，请您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件。
|
||||
|
||||
D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 工作之余完完成（希望您看到这里，可以移步 [Github](https://github.com/d2-projects/d2-admin) 点个 star 支持我）。
|
||||
|
||||
## 功能
|
||||
|
||||
* 使用 vue-cli3 构建
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 时间日期计算工具
|
||||
* 导入 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 +`
|
||||
* 本地持久化存储封装，可根据用户区分存储 `1.1.5 +`
|
||||
* 多标签页全局控制 API `1.1.5 +`
|
||||
* 菜单全局控制 API `1.1.5 +`
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
├─ dev
|
||||
│ └─ snippets 帮助开发的代码片段
|
||||
├─ docs 文档
|
||||
├─ public 静态资源
|
||||
├─ src
|
||||
│ ├─ assets 资源
|
||||
│ ├─ components 组件
|
||||
│ ├─ i18n 多国语
|
||||
│ ├─ layout 布局
|
||||
│ ├─ libs 通用库
|
||||
│ ├─ menu 菜单
|
||||
│ ├─ mock 模拟数据
|
||||
│ ├─ pages 页面
|
||||
│ ├─ plugin 插件
|
||||
│ ├─ router 路由
|
||||
│ ├─ store 全局状态
|
||||
│ ├─ App.vue
|
||||
│ └─ main.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 配置文件
|
||||
```
|
||||
|
||||
## 获取代码
|
||||
|
||||
有两种方式可以获得 D2Admin 的代码
|
||||
|
||||
* 在 [releases](https://github.com/d2-projects/d2-admin/releases) 页面下载最新的发行版。发行版一般是完成了某个大升级或者修复重要 bug 后发布的压缩包，你可以下载下来直接使用
|
||||
|
||||
* Fork 仓库到你的 github 然后克隆到本地，然后使用 master 分支继续你的开发。这种方式得到的是最新的代码，但是会有未完成的新功能。**不建议使用这种方式**
|
||||
|
||||
* 由于 github 访问较慢，推荐前往码云仓库下载 [gitee.com/fairyever/d2-admin](https://gitee.com/fairyever/d2-admin)，码云上的仓库**在每次发布版本或者修复 bug 才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地
|
||||
|
||||
> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库
|
||||
|
||||
## 使用
|
||||
|
||||
```
|
||||
// 安装依赖
|
||||
npm i
|
||||
|
||||
// 运行
|
||||
npm run dev
|
||||
|
||||
// 打包
|
||||
npm run build
|
||||
```
|
||||
|
||||
> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
|
||||
|
||||
## Thanks
|
||||
|
||||
D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日正式发布，39天时间 star 突破 1k ，在此对所有的 D2Admin 支持者表示感谢，项目将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
|
||||
|
||||
—— 2018年7月5日
|
||||
|
||||
star 破 2k
|
||||
|
||||
—— 2018年8月7日
|
||||
312
docs/zh/learn-guide/getting-started.md
Normal file
312
docs/zh/learn-guide/getting-started.md
Normal file
@@ -0,0 +1,312 @@
|
||||
# 快速上手
|
||||
|
||||
本文将会带领您从 0 开始使用 D2Admin 创建下面的页面：
|
||||
|
||||
|
||||
|
||||
## 前置知识
|
||||
|
||||
使用 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/)
|
||||
|
||||
## 准备
|
||||
|
||||
在上手之前，建议您先大致浏览以下章节，对整个系统有大致了解：
|
||||
|
||||
* 每个页面最基础的构成部分：[页面容器](../components/container.md)
|
||||
* 一些会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md)
|
||||
* 一些会用到的公用方法：[Util 实用工具](../plugins/util.md)
|
||||
|
||||
如果想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/)
|
||||
|
||||
## 下载项目
|
||||
|
||||
* 完整版仓库 [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 下载过慢，请参考 [常见问题](question.md)。
|
||||
:::
|
||||
|
||||
我的建议是使用 **简化版起始模板** 因为在完整版的基础上做减法，要比在简化版基础上做加法复杂。
|
||||
|
||||
下面的步骤都以简化版起始模板为基础演示如何使用。
|
||||
|
||||
下载完成后您会得到这些资源（以 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 安装不上，请参考 [常见问题](question.md)。
|
||||
|
||||
## 开发调试
|
||||
|
||||
在项目目录内启动项目：
|
||||
|
||||
```
|
||||
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 的页面，页面内容只有一句话，如果您好奇为什么这么写，可以参考 [页面容器](../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 实用工具](../plugins/vuex.md)。
|
||||
:::
|
||||
|
||||
打开 `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 的冰山一角，更多的配置项和组件文档请查阅本文档其它板块。
|
||||
|
||||
如果您有疑问，请加 QQ 群 **806395827** 反馈。
|
||||
|
||||
## 资源
|
||||
|
||||
下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
|
||||
|
||||
组件库：
|
||||
|
||||
* [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://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-cli) | 项目脚手架 |
|
||||
| [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](../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 修改本篇文档。
|
||||
Reference in New Issue
Block a user