VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
yarn add -D vuepress # npm install -D vuepress
创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
在 package.json 中添加一些 scripts
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
在本地启动服务器
yarn docs:dev # npm run docs:dev
默认主题提供了一个首页(HomePage)，即上面目录结构中的README.md文件中的内容，首页是可选的，对于 VuePress 中默认主题的首页，我们可以进行如下配置
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
导航栏 Logo
你可以通过 themeConfig.logo 增加导航栏 Logo ，Logo 可以被放置在公共文件目录：
module.exports = {
themeConfig: {
logo: '/assets/img/logo.png',
PS：公共文件目录: 在.vuepress文件夹下创建一个public目录。
想要使 侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组：
module.exports = {
themeConfig: {
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
侧边栏分组
module.exports = {
themeConfig: {
sidebar: [
title: 'Group 1',
path: '/foo/',
collapsable: false,
sidebarDepth: 1,
children: [
title: 'Group 2',
children: [ ],
initialOpenGroupIndex: -1
同时， /docs/components/*.md要加上
title: Button 按钮
sidebarDepth: 2
PS:重点 children collapsable（是否折叠）sidebarDepth
浏览器的 API 访问限制
当你在开发一个 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当遵循 编写通用代码 的要求。简而言之，请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API。
<ClientOnly>
<button-group-demo></button-group-demo>
</ClientOnly>
PS:放在 docs/components/*.md里
增加一个自定义的 favicon
module.exports = {
head: [
['link', { rel: 'icon', href: '/logo.png' }]
PS:logo放在public里
在 docs/.vuepress/config.js 中设置正确的 base。
如果你打算发布到 https://.github.io/，则可以省略这一步，因为 base 默认即是 "/"。
如果你打算发布到 https://.github.io//（也就是说你的仓库在 github.com//），则将 base 设置为 "//"。
PS:例如 base: "/orange-demo/", (github的仓库名)
2.在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:
#!/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:
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https:
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages // （!!!!github仓库名)
命令：./deploy.sh 然后在github仓库上开启 gh-pages 地址
