2018-07-27 11:11:57 +08:00
|
|
|
# 快速上手
|
|
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
|
|
|
|
|
## 前置知识
|
|
|
|
|
|
|
|
|
|
使用 D2Admin 首先组要有以下前置知识：
|
2018-07-27 22:56:37 +08:00
|
|
|
|
2018-07-28 13:57:53 +08:00
|
|
|
* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/)
|
|
|
|
|
* 需要有 [ES6](http://es6.ruanyifeng.com/) 语法知识
|
|
|
|
|
* 会使用 [vue.js](https://cn.vuejs.org/)
|
|
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
如果你了解以下技术，在使用本项目进行你的开发时会更加得心应手：
|
2018-07-28 13:57:53 +08:00
|
|
|
|
|
|
|
|
* [sass](https://www.sass.hk/guide/)
|
2018-07-27 11:11:57 +08:00
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
## 准备
|
|
|
|
|
|
|
|
|
|
在上手之前，建议您先大致浏览以下章节，对整个系统有大致了解：
|
2018-07-27 11:11:57 +08:00
|
|
|
|
|
|
|
|
* 每个页面最基础的构成部分：[页面容器](../components/container.md)
|
|
|
|
|
* 一些你会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md)
|
|
|
|
|
* 一些你会用到的公用方法：[Util 实用工具](../plugins/util.md)
|
|
|
|
|
|
2018-07-27 22:56:37 +08:00
|
|
|
如果你想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/)
|
|
|
|
|
|
2018-07-28 13:57:53 +08:00
|
|
|
## 下载项目
|
|
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
* 完整版仓库 [Github](https://github.com/d2-projects/d2-admin) | [码云](https://gitee.com/fairyever/d2-admin)
|
2018-07-28 13:57:53 +08:00
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
* 简化版起始模板 [Github](https://github.com/d2-projects/d2-admin-start-kit) | [码云](https://gitee.com/fairyever/d2-admin-start-kit)
|
2018-07-28 13:57:53 +08:00
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
挑选一个你喜欢的网站 Fork D2Admin 代码到你的仓库，然后下载或克隆。
|
2018-07-28 13:57:53 +08:00
|
|
|
|
|
|
|
|
::: tip
|
2018-07-28 22:32:58 +08:00
|
|
|
如果你使用 Github 下载过慢，请参考 [常见问题](question.md)。
|
2018-07-28 13:57:53 +08:00
|
|
|
:::
|
|
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
我的建议是使用 **简化版起始模板** 因为在完整版的基础上做减法，要比在简化版基础上做加法复杂。
|
2018-07-28 13:57:53 +08:00
|
|
|
|
2018-07-27 22:56:37 +08:00
|
|
|
## 资源
|
|
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看：
|
2018-07-27 22:56:37 +08:00
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
组件库：
|
2018-07-27 22:56:37 +08:00
|
|
|
|
|
|
|
|
* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)
|
|
|
|
|
|
2018-07-28 22:32:58 +08:00
|
|
|
项目基础：
|
|
|
|
|
|
|
|
|
|
| 名称 | 介绍 |
|
|
|
|
|
| --- | --- |
|
|
|
|
|
| [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 的配置语法 |
|
|
|
|
|
|
|
|
|
|
插件：
|
|
|
|
|
|
|
|
|
|
| 名称 | 介绍 |
|
|
|
|
|
| --- | --- |
|
|
|
|
|
| [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 修改本篇文档。
|
