使用vuepress搭建文档类网站

vuepress官网：https://vuepress.vuejs.org/zh/
参考链接：https://segmentfault.com/a/1190000017055963

安装

1.全局安装

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

2.现有项目安装

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

注意事项
如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

接着，在 package.json 里加一些脚本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

然后就可以开始写作了:

yarn docs:dev # 或者：npm run docs:dev

要生成静态的 HTML 文件，运行：

yarn docs:build # 或者：npm run docs:build

配置文件

配置需要在文档目录下创建一个.vuepress目录,所有 VuePress 相关的文件都将会被放在这里。
目录结构

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

其中有一个最重要的文件.vuepress/config.js，网站的所有文件的配置都在这个文件里面，需要创建该文件touch .vuepress/config.js,该文件要导出一个JavaScript 对象：

module.exports = {
  title: '个人文档',
  base: '/docs/',
  description: '练习文档'
}

base为文件路径

导航栏和侧边栏配置

链接：https://vuepress.vuejs.org/zh/config/#themeconfig

module.exports = {
  title: '个人文档',
  base: '/docs/',
  description: '练习文档'
  themeConfig: {
    sidebarDepth: 3,
    sidebar: [
      {
        title:'新手指南',
        children:['/','/home1']
      },
      {
        title:'开始',
        children:['/home2','/home3']
      }
    ]
  }
}

sidebarDepth为侧边栏展示深度，可展示至三级标题
相应md文件中标题，侧边栏可根据该标题显示文本，否则使用一级标题显示

---
title: home1
---