vuepress 快速搭建一个静态网站

1. vuepress 是什么?
http://caibaojian.com/vuepress/guide/ 官方文档介绍说的很清楚，vuePress是尤雨溪又一个力作
这里搭建教程，为了更快，感受到vuepress是什么样的东西，有什么效果。

2. 新建一个名字为demo文件夹 ，之后安装 （node版本要8.0以上）

npm install -g vuepress   // 全局安装 ， vuepress
npm init -y               // 快速初始化 ， 这里会在demo文件夹下面生成一个package.json

3. 配置运行脚本

配置package.json，里面有scripts选项,将下述兩行代码加进去就行

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

4. 在demo文件夹下，再新建一个docs文件夹 ， 进入docs文件夹，新建一个 README.md文件，在里面写一点文字吧！
此时文件目录是

demo
+--docs
+----README.md
+--package.json

5. 执行我们刚才插入的脚本命令
npm run docs:dev    // 运行该命令 ， 你查看网站，内容是我们刚才在  README.md里面写的内容
npm run docs:build  // 执行该命令，打包到dist文件 ， 生成  .vuepress  文件夹
此时目录结构

demo
+--docs
+----.vuepress
+------ dist   //打包后的文件夹
+----README.md
+--package.json
+--node_modules

6. 在 .vuepress下面创建一个 congfig.js文件

module.exports = {
  title: 'Adroi媒体API 接口文档',  // 设置网站标题
  description : 'Adroi',
  base : '/v1/adroi-h5/adroiapi/',
  themeConfig : {
    nav : [
        { text: '接口定义', link: '/apiword' },
        { text: '接口字段定义', link: '/api' },
        { text: '附录：错误码', link: '/error' }
    ],
    sidebarDepth : 2
  }
}

7. 运行 npm run docs:dev  , 看看效果吧！！！