VuePress

VuePress是以Vue驱动的静态网站生成器，可搭建自己的博客网站。

1.全局安装

npm install -g vuepress

2.创建项目目录

mkdir vuePress
cd vuePress

3.初始化项目

npm init -y
// 注：y代表yes，在init的时候省去了敲回车的步骤，生成的默认的package.json。

4.新建docs文件夹

mkdir docs

5.设置package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs", //启动
    "docs:build": "vuepress build docs" //打包，会生成node_modules文件夹
  }
}

6.创建.vuepress目录(用于存放页面文件)

mkdir .vuepress

7.创建config.js

touch config.js

8.创建public文件夹(放置静态文件)

mkdir public

// 此时目录解构：
project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

9.config.js配置

module.exports = {
  title: '文档demo',  // 设置网站标题
  description : 'docs',
  base : '/docs',
  themeConfig : {
    nav : [
        { text: '字段名定义', link: '/name' },
        { text: '字段属性定义', link: '/props' },
        { text: '字段方法定义', link: '/methods' }
    ],
    sidebar: {
        '/' : [
            "/",  //指的是README.md 里面的内容
            "name",  // 根目录docs创建 name.md文件
            "props",// 根目录docs创建 props.md文件
            "methods" // 根目录docs创建 methods.md文件
        ]
    },
    sidebarDepth : 2
  }
}

效果如下：

image.png