Skip to content

Commit 7cc0fd3

Browse files
wangtunanwangtunan
committed
vuepress文档撰写
1 parent 805c72e commit 7cc0fd3

File tree

11 files changed

+112
-68
lines changed

11 files changed

+112
-68
lines changed

‎docs/.vuepress/config.js

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ module.exports = {
3838
'/guide/basic/start.md',
3939
'/guide/basic/mock.md',
4040
'/guide/basic/vuex.md',
41-
'/guide/basic/router.md'
41+
'/guide/basic/router.md',
42+
'/guide/basic/node.md',
43+
'/guide/basic/mongoose.md'
4244
]
4345
},
4446
{
@@ -48,37 +50,38 @@ module.exports = {
4850
'/guide/components/',
4951
'/guide/components/star.md',
5052
'/guide/components/badge.md',
51-
'/guide/components/switch.md',
52-
'/guide/components/timeline.md',
53-
'/guide/components/progress.md',
54-
'/guide/components/steps.md',
55-
'/guide/components/breadcrumb.md',
56-
'/guide/components/backtop.md',
57-
'/guide/components/button.md',
58-
'/guide/components/message.md',
59-
'/guide/components/message-box.md',
60-
'/guide/components/carousel.md',
61-
'/guide/components/pagination.md',
62-
'/guide/components/dialog.md',
63-
'/guide/components/divider.md'
53+
'/guide/components/switch.md'
54+
// '/guide/components/button.md'
55+
// '/guide/components/timeline.md',
56+
// '/guide/components/progress.md',
57+
// '/guide/components/steps.md',
58+
// '/guide/components/breadcrumb.md',
59+
// '/guide/components/backtop.md',
60+
// '/guide/components/button.md',
61+
// '/guide/components/message.md',
62+
// '/guide/components/message-box.md',
63+
// '/guide/components/carousel.md',
64+
// '/guide/components/pagination.md',
65+
// '/guide/components/dialog.md',
66+
// '/guide/components/divider.md'
6467
]
6568
},
6669
{
6770
title: "开发",
6871
collapsable: false,
6972
children: [
7073
'/guide/develop/layout.md',
71-
'/guide/develop/sidebar.md',
74+
// '/guide/develop/sidebar.md',
7275
'/guide/develop/login.md',
7376
'/guide/develop/home.md',
7477
'/guide/develop/lesson.md',
7578
'/guide/develop/read.md',
76-
'/guide/develop/question.md',
77-
'/guide/develop/article.md',
79+
// '/guide/develop/question.md',
80+
// '/guide/develop/article.md',
7881
'/guide/develop/cart.md',
79-
'/guide/develop/course.md',
82+
// '/guide/develop/course.md',
8083
'/guide/develop/order.md',
81-
'/guide/develop/user.md',
84+
// '/guide/develop/user.md',
8285
'/guide/develop/notice.md'
8386
]
8487
},

‎docs/base/README.md

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎docs/guide/README.md

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,48 +21,70 @@
2121

2222
## 背景
2323
在目前的业务搬砖中，接触到的项目大多是中后台项目，每日搬砖无非就是拿`element-ui`轮子一把嗦，轮子仔当久了自己也安逸了，痛定思痛后决定当一会轮子的制造者。<br/>
24-
本项目中关于基础组件的封装，全部抛弃使用`element-ui`，而采用自己封装，已达到提高自己的目的，如果你对本项目中封装的公共组件感兴趣的话，请移步这里:point_right: [基础组件](/base/)
24+
本项目中关于基础组件的封装，**尽可能**抛弃使用`element-ui`，而采用自己封装，知其然同时又知其所以然。
2525

2626
**基础公共组件完成情况**：<br/>
2727
<input type="checkbox" checked/> Container(布局容器) <br/>
2828
<input type="checkbox" checked/> Star(星级评分) <br/>
2929
<input type="checkbox" checked/> Badge(标记)<br/>
3030
<input type="checkbox" checked/> Switch(开关)<br/>
31-
<input type="checkbox" checked/> Timeline(时间线)<br/>
31+
<!-- <input type="checkbox" checked/> Timeline(时间线)<br/> -->
3232
<input type="checkbox" checked/> Progress(进度条)<br/>
33-
<input type="checkbox" checked/> Step(步骤条)<br/>
34-
<input type="checkbox" checked/> Breadcrumb(面包屑导航)<br/>
33+
<!-- <input type="checkbox" checked/> Step(步骤条)<br/> -->
34+
<!-- <input type="checkbox" checked/> Breadcrumb(面包屑导航)<br/> -->
3535
<input type="checkbox" checked/> BackTop(返回顶部)<br/>
3636
<input type="checkbox" checked/> Button(按钮)<br/>
3737
<input type="checkbox" checked/> Message(消息提示)<br/>
3838
<input type="checkbox" checked/> MessageBox(消息确认)<br/>
3939
<input type="checkbox" checked/> Carousel(轮播)<br/>
40-
<input type="checkbox" checked/> Pagination(分页)<br/>
4140
<input type="checkbox" checked/> Dialog(弹窗)<br/>
42-
<input type="checkbox" checked/> Divider(分割线)<br/>
41+
<input type="checkbox" checked/> Pagination(基于element-ui二次封装)<br/>
42+
<!-- <input type="checkbox" checked/> Divider(分割线)<br/> -->
4343

44-
## 预览&源码地址
44+
## 源码地址&开发
4545

46-
如果你想观看此项目的演示效果，请移步:point_right: [预览地址](https://wangtunan.github.io/vue-mooc/#/home) <br/>
4746
如果你需要看一看此项目的源码，请移步:point_right: [源码仓库](https://github.com/wangtunan/vue-mooc)
4847

48+
### 开发
49+
50+
一方面由于采用`Node+MongoDB`来撰写后端接口，另一方面暂时还不方便部署在云服务器，因此此项目需要本地安装`MongoDB`数据库，你可以点击[MongoDB官网](https://www.mongodb.com/)去下载最新版本的。
51+
52+
```sh
53+
# 克隆代码
54+
$ git clone https://github.com/wangtunan/vue-mooc.git
55+
56+
# 安装依赖
57+
$ npm install
58+
59+
# 启动Node接口
60+
$ npm run node
61+
62+
# 启动本地开发服务
63+
$ npm run serve
64+
```
65+
66+
4967
## 静态站点介绍
5068
本静态站点采用[VuePress1.x](https://v1.vuepress.vuejs.org/)撰写而来，你可以在其官网很方便的找到该如何配置以及搭建属于自己的静态站点。<br/>
5169
如果你对于官网中的文档不太那么理解，那么请移步:point_right: [从今天开始拿起VuePress打造属于自己的专属博客](https://wangtunan.github.io/blog/vuepress/)<br/>
5270
这篇博客也同时提供了一个简单的[VuePress配置Demo](https://github.com/wangtunan/vuepress-blog-demo)<br/>
53-
如果你想要一个更贴近于实际的配置，那么请移步:point_right:[本站点的VuePress站点](https://github.com/wangtunan/vue-mooc-site)
71+
如果你想要一个更贴近于实际的配置参考，那么请移步:point_right:[本站点的VuePress站点](https://github.com/wangtunan/vue-mooc-site)
5472

5573
## 部分页面功能演示
5674

5775
### 首页
5876
![首页](../images/1.gif)
5977

60-
### 课程页面
78+
### 免费课程
6179
![课程页面](../images/2.gif)
6280

81+
### 实战课程
82+
6383
### 专栏
6484
![专栏](../images/3.gif)
6585

86+
### 猿问
87+
6688
### 手记
6789
![手记](../images/4.gif)
6890

@@ -73,4 +95,6 @@
7395
![消息中心](../images/6.gif)
7496

7597
### 订单中心
76-
![订单中心](../images/7.gif)
98+
![订单中心](../images/7.gif)
99+
100+
### 个人中心

‎docs/guide/basic/mock.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
# Mock数据
2-
2+
::: warning
3+
在最早的一版中，我们使用的是`Mock`数据的方式来处理我们的请求，虽然现在我们已经使用了`Node`重写了后端接口，但我们依然选择保留对于这一部分的介绍，因为`Mock`数据在某些情况下依然能给我们很大的帮助。
4+
:::
35
## easy-mock远程接口服务
4-
::: tip
6+
::: warning
57
`easy-mock`对于个人开发者而言，无疑是一个非常优秀的平台，但由于是免费的，接口服务可能会经常性的挂掉，所以我们在后来的版本中，逐渐摒弃了这种方式。
68
:::
79
在`vue-mooc`最初的时候，我们使用了`easy-mock`的远程接口服务，如果你也对[easy-mock](https://www.easy-mock.com/)感兴趣的话，那么你可以去注册一个账号，`easy-mock`是免费的，
8-
以下是使用`easy-mock`创建的一些接口列表，它们一共有`34`个：
10+
以下是使用`easy-mock`创建的一些接口列表：
911

1012
![easy-mock接口](../../images/easy-api.png)
1113

‎docs/guide/basic/mongoose.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Mongoose
2+
3+
## 初始化数据
4+
5+
## 连接MongoDB
6+
7+
## MongoDB可视化管理工具
8+
9+
## 基本语法

‎docs/guide/basic/node.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Node接口
2+
3+
## 目录设计
4+
5+
## 基本配置
6+
使用`Koa`来撰写后端接口需要我们先安装一些必要的依赖：
7+
* `koa`
8+
* `koa-bodyparser`
9+
* `koa-json`
10+
11+
## ES6语法处理
12+
* `nodemon`
13+
* `babel-preset-env`
14+
* `babel-node`
15+
16+
## 路由配置
17+
* `koa-router`

‎docs/guide/basic/router.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
:::
1010
由于我们是`SPA`单页面应用，假设有两个模块`a`和`b`，我们使用路由懒加载的方式：
1111
```js
12-
const AModule = import('./a.vue')
13-
const BModule = import('./b.vue')
12+
const AModule = () => import('./a.vue')
13+
const BModule = () => import('./b.vue')
1414
```
1515
这样懒加载以后，我们就能实现：当我们去访问模块`a`的时候才会去加载`a`这一块的内容，当我们去访问模块`b`的时候才会去加载`b`这一块的内容。
1616

@@ -51,7 +51,7 @@ router.beforeEach((to, from, next) => {
5151
let userinfo = getUserInfo()
5252
if (to.meta.requireAuth) {
5353
// 登录以后才可以访问
54-
if (userinfo.name) {
54+
if (userinfo.id) {
5555
next()
5656
} else{
5757
store.commit('login/SET_SHOW_LOGIN', true)
@@ -110,7 +110,7 @@ const router = new Router({
110110
router.beforeEach((to, from, next) => {
111111
let userinfo = getUserInfo()
112112
if (to.meta.requireAuth) {
113-
if (userinfo.name) {
113+
if (userinfo.id) {
114114
next()
115115
} else{
116116
store.commit('login/SET_SHOW_LOGIN', true)

‎docs/guide/basic/start.md

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,10 +149,16 @@ img-box($width, $height)
149149
良好的项目结构设计，能在一定程度上能够帮助我们更好的管理和维护我们的项目，以下是`vue-mooc`的目录结构设计：
150150
``` sh
151151
|-- docs # vuepress站点文档
152+
|-- serve # node后端接口
153+
| |-- initData # 一些初始化MongoDB数据库的模拟数据
154+
| |-- interface # 所有接口
155+
| |-- middleward # 中间件
156+
| |-- models # mongoose模型
157+
| |-- app.js # 后端接口入口文件
158+
| |-- config.js # 后端接口相关配置文件
152159
|-- public # 静态资源
153160
| |-- favicon.ico # icon图标
154161
| |-- index.html # html模板
155-
| |-- mock # mock .json文件
156162
|-- src # 源代码目录
157163
| |-- api # 请求接口目录
158164
| |-- assets # 字体、js和样式资源目录
@@ -161,6 +167,7 @@ img-box($width, $height)
161167
| |-- pages # 业务页面目录
162168
| |-- App.vue # 入口页面
163169
| |-- main.js # 入口js
170+
| |-- register.js # 全局注册base基础组件
164171
| |-- router # 路由目录
165172
| |-- store # 全局Vuex目录
166173
| |-- utils # 工具类js目录
@@ -188,7 +195,7 @@ img-box($width, $height)
188195
:::
189196
```js
190197
// .eslintrc.js
191-
module.exports = {
198+
module.exports = {
192199
"root": true,
193200
"env": {
194201
"browser": true,
@@ -211,6 +218,10 @@ module.exports = {
211218
"vue/max-attributes-per-line": 0,
212219
// 不允许在template组件上绑定某些属性，例如key
213220
"vue/no-template-shadow": 0,
221+
// vue组件自闭和标签
222+
'vue/html-self-closing': 0,
223+
// 单行内容必须换行
224+
'vue/singleline-html-element-content-newline': 0,
214225
// 生产环境下不允许debugger调试
215226
"no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
216227
// 允许console打印
@@ -303,7 +314,10 @@ module.exports = {
303314
port: 3400,
304315
proxy: {
305316
'/mock': {
306-
target: 'http://localhost:3400'
317+
target: 'http://localhost:3400',
318+
pathRewrite: {
319+
'/mock': ''
320+
}
307321
}
308322
}
309323
},
@@ -331,6 +345,7 @@ import { getHot } from 'src/api/common.js'
331345
我们先来看一看`package.json`中一共有多少条打包命令：
332346
```json
333347
"scripts": {
348+
"node": "nodemon server/app.js --exec babel-node --presets env",
334349
"serve": "vue-cli-service serve",
335350
"build": "vue-cli-service build",
336351
"lint": "vue-cli-service lint",
@@ -340,6 +355,7 @@ import { getHot } from 'src/api/common.js'
340355
}
341356
```
342357
对于每一条打包命令，它们的解释如下：
358+
* `node`：启动`Node`后端接口服务。
343359
* `serve`和`build`，这两条命令不需要多解释。
344360
* `lint`：使用此条命令，可以启用`eslint-loader`对我们的代码进行校验，它会把错误输出在控制台，还会进行简单的格式修复。
345361
* `docs:dev`和`docs:build`，同`serve`和`build`类似，它们是`VuePress`本地写作和打包的命令。

‎server/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ app.use(async (ctx, next) => {
3939
} else {
4040
await next();
4141
}
42-
});
42+
})
4343
app.keys = ['vue-mooc-keys']
4444

4545
// 中间件

‎src/base/empty/empty.png

-2.69 KB
Binary file not shown.

‎src/base/empty/empty.vue

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)