VuePress 入门

VuePress 是一款使用 Vue 驱动的静态网站生成器，是 Vue 的作者 Evan You 为了方便文档的编写而开发的。

• 默认主题与 Vue 官方文档一致

• 简洁，少配置，高性能

• Markdown 专为技术文档提供拓展

• 自带 PWA

• 自定义主题，可定制程度完全由自己决定

官方文档：由于 1.x 还处于测试阶段，可能随时变更，所以建议选用 0.x 版本

• 0.x 版本

• 1.x 版本

1. 初始化

安装

首先需要安装 vuepress

可以使用全局安装：（选一个版本安装即可，使用 yarn 或 npm 都可以）

也可以使用局部安装，在你的项目根目录下：

注意有一个坑，我遇到过，安装 vuepress@next 以及其他插件时，默认会安装 alpha 0 版本，需要修改 package.json 文件，更改版本号，再重新使用 yarn 安装一下。

另外，全局安装与局部安装在后面的部署命令中会有些差别。

结构目录

可详细查看：目录结构

2. 配置 config.js 文件

基础配置

可详细查看：配置

主题配置

可详细查看：默认主题配置

3. 首页

配置 docs 下的 README.md 文件即可：

首页必须设置 home 为 true。默认样式与官方文档首页一致。

4. 开发和部署

定义脚本

初始化 package.json，如果是局部安装的话，这个文件已经存在，不需要执行这个命令

编辑 package.json 文件，添加如下脚本：（这里需要注意）

个人不喜欢官方的写法，就把名称写的简洁一些。

运行脚本命令：

部署到 GitHub Pages 上

部署到 GitHub 上，首先要在 GitHub 上建立仓库，这里省略。

然后再本地初始化仓库，并关联远程仓库

打包之后把整个项目上传到 master 分支上，方便管理

单独将打包好的文件上传到 gh-pages 分支上，自动会生成 GitHub Pages，在仓库设置里可以查看到相应地址。

注意，最好配置一个 .gitignore 文件，去掉不需要上传的文件和文件夹。

自动化部署

每一次更新完文章之后，都需要敲一大串代码，才能重新部署，显得很繁琐。那么我们来让这些命令合并成一个命令吧。

项目根目录下创建 deploy.sh 文件：

然后在 package.json 文件中配置脚本：

后续部署直接使用命令：

需要注意的是，后面带的消息，不能使用空格隔开（本人对 shell 脚本不熟悉，查找了也没明白，希望有大神指点一下），使用了空格，就会导致只提交了空格前的消息。

另外，这个命令需要在 git bash 中使用，不能在 Windows 的命令行中使用。

5. 后续

太喜欢 VuePress 了，因为后面都托管给 Vue 了，所以速度飞快。