## 一、概述 **VuePress**是vue官方基于vuejs开发的SPA架构的静态网站生成器，它基于Vue + webpack； 它可以用来发布个人网站，撰写文档等； ## 二、快速开始 这里介绍从零开始，如果是希望在一个既有项目中，引入vuepress来进行项目的文档管理，则可以跳过前面两步，从第三步开始； 这里要求的环境，跟一个普通的vuejs项目无差别（nodejs、vuejs、vue-cli及webpack等）； （1）、创建工程目录，如raydocs； ``` mkdir raydocs cd raydocs //进入工程目录，后续命令，默认都在工程目录下执行 ``` （2）、使用包管理器进行初始化（根目录下生成package.json）； ``` npm init ``` （3）、安装VuePress 为本地依赖； ``` yarn add -D vuepress ``` （4）、在当前工程目录下，创建docs子目录，且创建第一篇文档README.md（md格式，内容为一句话：# Hello VuePress）； （5）、在 package.json 中添加一些脚本（在scripts字段部分，追加，追加后完整的scripts内容如下）； ~~~ { "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1", "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } ~~~ （6）、启动 ~~~ npm run docs:dev ~~~ 效果：  现在，你已经有了一个简单可用的 VuePress 文档； ## 三、配置（包括为发布到github做准备） 1、为更好的自定义网站（基于VuePress），为工程需要创建一个配置目录，命名为`..vuepress`.，一个 VuePress 网站必要的配置文件是`.vuepress/config.js`，它应该导出一个 JavaScript 对象； ~~~ module.exports = { title: 'Hello VuePress', description: 'Just playing around', base:'/blog/' } ~~~ 其中，base属性，是部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它，如果你想将你的网站部署到`https://foo.github.io/bar/`，那么`base`应该被设置成`"/bar/"`，它的值应当总是以斜杠开始，并以斜杠结束； 2、 在原 package.json 中添加一些脚本 ``` "deploy-gh": "yarn docs:build && bash deploy-to-github.sh" ``` 追加后完整的scripts内容如下： ``` "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs", "deploy-gh": "yarn docs:build && bash scripts/deploy-to-github.sh"  }, ``` ## 四、部署到github 将上述基于vuepress的文档库，部署到github上，遵循如下步骤； （1）、登陆github，创建仓库；  （2）、新建一个自动部署脚本，命名为deploy-to-github.sh，放到scripts目录下； ``` #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果发布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果发布到 https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages git push -f git@github.com:4170804/press.git master:gh-pages cd - ``` （3）、在当前工程目录下，执行命令； ``` npm run deploy-gh； ``` 完成后，即可看到效果了，访问的地址为：  https://4170804.github.io/press/ 就可以看到文档的主页了； ## 五、完整实例代码 0、结构  打包生成的文件目录为：  1、配置文件  2、脚本文件  3、包管理文件  ## 六、进阶应用 主要就是增加了文档文件以及对应的调整配置文件，如下所示： 1、配置文件 ``` module.exports = { title: 'ray', description: 'work and study', base: '/press/', head: [ ['link', { rel: 'icon', href: '/favicon.ico' }] ], themeConfig: { logo: '/logo.png', repo: '4170804/rayfront', docsDir: 'docs', editLinks: true, editLinkText: '在 Github 上帮助我们编辑此页', nav: [ {text: '首页', link: '/'}, {text: '接口', link: '/advance/api'}, {text: '开始', link: '/start/faq'}, ], lastUpdated: 'Last Updated', sidebar: [ { title: '开始', collapsable: false, children: [ '/start/use', '/start/faq' ] }, { title: '开发', collapsable: false, children: [ '/develop/front', '/develop/back' ] }, { title: '进阶', collapsable: false, children: [ '/develop/front', '/develop/back' ] } ], nextLinks: true, prevLinks: true, }, plugins: ['@vuepress/back-to-top', require('./plugins/alert')], markdown: { lineNumbers: true } } ``` 2、新增md文件及子目录  3、提供静态资源文件  4、配置文件中，需要的插件放到.vuepress/plugins  需求源自：