1. vuepress 是什么?

 官方文档介绍说的很清楚，vuePress是尤雨溪又一个力作

这里搭建教程，为了更快，感受到vuepress是什么样的东西，有什么效果。

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

npm install -g vuepress   // 全局安装 ， vuepressnpm 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  , 看看效果吧！！！