VuePress 使用

1. 安装vuepress

需要全局安装
npm install -g vuepress

2. 创建项目目录

3. 在项目目录下初始化项目,npm init -y

4. 在项目目录下新建docs文件夹

5. 设置package.json

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

然后项目可以通过npm run dev运行测试浏览，通过npm run build进行打包。
6. 在docs目录下新建.vuepress目录，mkdir .vuepress
7. 在.vuepress目录新建config.js文件, vuepress配置文件
8. 在.vuepress目录新建public文件夹,放置静态资源文件

到此项目结构

project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

示例：
config.js

module.exports = {
  title: '网页名称', 
  description: '文档描述',
  themeConfig: {
    search: false,
    nav: [
      { text: 'Home', link: '/' },
      { text: 'External', link: 'https://google.com' },
    ],
    sidebar: [
      ['/', '简介'],
      ['/pageone/index1.md', '第一页标题'],// index这个名称不能使用
      ['/pagetwo/feedback.md', '第二页标题'],
      {
        title: "多级",
        collapsable: true,
        children:[
            ['/pagethree/1.md', '页面1'],
            ['/pagethree/2.md', '页面2']
        ]
    },
    ]
  }
}

对应的结构

project
├─── docs
│   ├── README.md
│   └── .vuepress
│   │   ├── public
│   │   └── config.js
│ 	├── pageone
│   │   └──index1.md
│   ├── pagetwo
└── package.json

如果index1.md内容插入图片，可以在pageone目录下新建一个img目录，内放图片资源，然后在index1.md中使用相对路径引入。
参考连接:

https://segmentfault.com/a/1190000015237352?utm_source=tag-newest
https://segmentfault.com/a/1190000020097643
https://www.jianshu.com/p/c590ef514fca(推荐)