From 8ca89ee827f53f0307ba9362b3b832c7d6a54555 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Sun, 29 Jul 2018 10:26:41 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BF=AB=E9=80=9F=E4=B8=8A=E6=89=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: d1cb484638e86d4892dba1ab4433a5da255e87dc [formerly 397cbca1cd415485cba516a0a4c64d44579b57b9] [formerly d1cb484638e86d4892dba1ab4433a5da255e87dc [formerly 397cbca1cd415485cba516a0a4c64d44579b57b9] [formerly d1cb484638e86d4892dba1ab4433a5da255e87dc [formerly 397cbca1cd415485cba516a0a4c64d44579b57b9] [formerly 397cbca1cd415485cba516a0a4c64d44579b57b9 [formerly 20ec297681204a8c5ad324da390f8941d1de2aee [formerly 93835f2163f9a87e5b3b436ddacece6c3b05dcab]]]]] Former-commit-id: 35138abcfd9a2381f677fd90f35b8c5dfd3bc14f Former-commit-id: 9bfe3d0f5af369543ffda69a95b77a8ce81a3b93 Former-commit-id: 17ec515a4345f81eacf114a1c36226f8daa21b3b [formerly a868a426d92a2f3fa91bdbfa4ecb810a516b035c] Former-commit-id: a58f6bf2968256c79fc37ab95e9bb39b6e07c4c1 Former-commit-id: 714e6f5c675907fb0d4c53668b7bcf122b49942e Former-commit-id: 01cab9ef6968de91c2172d3bebb0ada85f34d0a5 Former-commit-id: 67f94234f59274074c815b41756d76afaf799464 Former-commit-id: 6b7f3a82de55ff904e07b6e57ac722b0f9776eef --- docs/zh/guide/getting-started.md | 248 ++++++++++++++++++++++++++++++- 1 file changed, 240 insertions(+), 8 deletions(-) diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md index 46bdbfc8..9e0a2e5c 100644 --- a/docs/zh/guide/getting-started.md +++ b/docs/zh/guide/getting-started.md @@ -1,16 +1,19 @@ # 快速上手 +本文将会带领您从 0 开始使用 D2Admin 创建下面的页面： + +![](http://fairyever.qiniudn.com/20180729102354.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) ## 前置知识 使用 D2Admin 首先组要有以下前置知识： * 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/) -* 需要有 [ES6](http://es6.ruanyifeng.com/) 语法知识 * 会使用 [vue.js](https://cn.vuejs.org/) -如果你了解以下技术，在使用本项目进行你的开发时会更加得心应手： +如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手： +* [ES6](http://es6.ruanyifeng.com/) * [sass](https://www.sass.hk/guide/) ## 准备 @@ -18,10 +21,10 @@ 在上手之前，建议您先大致浏览以下章节，对整个系统有大致了解： * 每个页面最基础的构成部分：[页面容器](../components/container.md) -* 一些你会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md) -* 一些你会用到的公用方法：[Util 实用工具](../plugins/util.md) +* 一些会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md) +* 一些会用到的公用方法：[Util 实用工具](../plugins/util.md) -如果你想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/) +如果想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/) ## 下载项目 @@ -29,14 +32,243 @@ * 简化版起始模板 [Github](https://github.com/d2-projects/d2-admin-start-kit) | [码云](https://gitee.com/fairyever/d2-admin-start-kit) -挑选一个你喜欢的网站 Fork D2Admin 代码到你的仓库，然后下载或克隆。 +挑选一个您喜欢的网站 Fork 代码到您的仓库，然后下载或克隆。 ::: tip -如果你使用 Github 下载过慢，请参考 [常见问题](question.md)。 +如果使用 Github 下载过慢，请参考 [常见问题](question.md)。 ::: 我的建议是使用 **简化版起始模板** 因为在完整版的基础上做减法，要比在简化版基础上做加法复杂。 +下面的步骤都以简化版起始模板为基础演示如何使用。 + +下载完成后您会得到这些资源（以 1.1.5 版本为例）： + +![](http://fairyever.qiniudn.com/20180729091149.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +## 安装环境 + +::: tip +如果您以前运行过 webpack 项目，并且本机 node 版本为 8，可以忽略这一步。 +::: + +### node + +在 [node.js 官网](https://nodejs.org/en/download/) 下载合适您系统的 node.js。 + +![](http://fairyever.qiniudn.com/20180729091640.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +安装完毕后检查版本（最好使用 node 8 版本）。 + +``` sh +node -v +v8.11.1 +npm -v +5.6.0 +``` + +### nrm or cnpm + +由于网络原因，npm 在国内使用比较慢，建议切换 npm 源到国内镜像。 + +有两种比较方便的方式切换您的 npm 源： + +1. [nrm](https://www.npmjs.com/package/nrm) [ 建议 ] + +安装： + +``` sh +npm install -g nrm +``` + +查看所有可用源： + +``` sh +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 +``` + +切换源： + +``` sh +nrm use taobao +``` + +2. [cnpm](https://npm.taobao.org/) + +安装： + +``` sh +npm install -g cnpm --registry=https://registry.npm.taobao.org +``` + +## 安装依赖 + +将终端切换到项目目录之后安装依赖： + +``` sh +npm i +``` + +如果遇到问题比如 node-sass 安装不上，请参考 [常见问题](question.md)。 + +## 开发调试 + +在项目目录内启动项目： + +``` sh +npm run dev +``` + +或者使用： + +``` sh +npm start +``` + +也可以使用 cli3 新推荐的命令： + +``` sh +npm run serve +``` + +以上每种方式效果都是一样的，只是为了照顾不同人的习惯起了三个名字，实质上都是运行了 `vue-cli-service serve --open`。 + +成功运行后会显示登陆界面： + +![](http://fairyever.qiniudn.com/20180729094841.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +## 新建页面 + +`src/pages` 目录是页面存放目录，在此目录下新建目录，例如 **page-demo**： + +![](http://fairyever.qiniudn.com/20180729095509.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +然后在文件夹内新建 **index.vue** 文件： + +``` vue + +``` + +上面的代码生成了一个带有 header 和 footer 的页面，页面内容只有一句话，如果您好奇为什么这么写，可以参考 [页面容器](../components/container.md) + +![](http://fairyever.qiniudn.com/20180729095919.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +## 设置路由 + +`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 也会做出相应更新。 + +![](http://fairyever.qiniudn.com/20180729101736.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +![](http://fairyever.qiniudn.com/20180729101708.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) + +上述教程只是介绍了 D2Admin 的冰山一角，更多的配置项和组件文档请查阅本文档其它板块。 + +如果您有疑问，请加 QQ 群 **806395827** 反馈。 + ## 资源 下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看： @@ -76,4 +308,4 @@ | [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 | | [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 | -上面只是一些猜你会用到的链接，还有一些项目中用到但是这里没有列举的，如果你觉得有必要，可以提 pr 修改本篇文档。 \ No newline at end of file +上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。 \ No newline at end of file