VuePress 由两部分组成：一部分是支持用 Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。在VuePress应用的目录里面，一个.md文件可以生产一个.html文件，文件夹目录下默认访问README.md文件，也就相当于目录下的index.html，所以本地测试环境访问的链接如：http://localhost:8081/bar/barOne.html。
确保你的系统node.js版本 >= 8
环境搭建
安装
全局安装：
npm install -g vuepress
创建项目目录：
mkdir myproject
初始化项目：
cd myproject
npm init -y
新建docs文件夹：
mkdir docs
新建markdown文件：
echo '# Hello VuePress!' > README.md
设置package.json启动：
运行npm run build会生成静态目录dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| {
"scripts": {
"start": "vuepress dev docs",
"build": "vuepress build docs"
}
}
````
创建.vuepress目录：
进入docs文件夹中创建.vuepress目录存放vuePress的相关文件
`cd docs`
`mkdir .vuepress`
创建config.js文件：
进入.vuepress文件夹中创建config.js文件，config.js是vuePress必要的配置文件，它导出一个js对象
`cd .vuepress`
`type nul>config.js`
#### 基本配置
**站点信息**
config.js配置：
config.js文件包含网站的标题，描述，部署信息等配置，其他详细配置见[官方文档](https:
```javascript
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
|
主题配置
默认主题配置：
进入docs目录，修改README.md文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| ---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
|
导航栏配置：
配置config.js，可以使用themeConfig配置给站点添加导航链接，在docs目录下新建about.md和contact.md文件，其他详细配置请查看官方文档
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'foo', link: '/foo/' },
{ text: 'bar', link: '/bar/' },
{ text: 'About', link: '/about' },
{ text: 'Contact', link: '/contact' },
]
}
}
|
新增其他页面：
为了更好的演示侧边栏效果，新增四个页面，分别在docs目录下新增foo、bar文件夹，foo文件夹里面新建fooOne.md、fooTwo.md、RADME.md文件，新建文件或文件夹可参考上面命令行工具
配置侧边栏：
配置config.js，可以使用sidebar配置给站点添加侧边栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| module.exports = {
sidebar: {
'/foo/': [
'',
'fooOne',
'fooTwo'
],
'/bar/': [
'',
'barOne',
'barTwo'
]
}
}
}
|
搜索配置：
配置config.js，可以使用search配置站点是否禁用启用搜索，可以使用searchMaxSuggestions配置站点搜素显示的结果条数
1
2
3
4
5
| module.exports = {
search: true,
searchMaxSuggestions: 10
}
}
|
至此，一个简单的vuePress应用基本配置已经完成，最终的config.js文件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| module.exports = {
title: 'Hello VuePress',
description: 'Just playing around',
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'foo', link: '/foo/' },
{ text: 'bar', link: '/bar/' },
{ text: 'About', link: '/about' },
{ text: 'Contact', link: '/contact' }
],
sidebar: {
'/foo/': [
'',
'fooOne',
'fooTwo'
],
'/bar/': [
'',
'barOne',
'barTwo'
]
},
search: true,
searchMaxSuggestions: 10
}
}
|
现在可以运行npm run build构建项目，生产dist目录文件，发布到对应的服务上去了。