Vuepress+Nodejs+Webpack+Markdown搭建侧边栏博客系统或API文档

全局安装Vuepress

在命令行中使用npm命令安装，前提是安装了Node.js>=8的版本。
Nodejs安装可参考https://www.jianshu.com/p/13f45e24b1de

npm install -g vuepress

检查是否安装成功

vuepress -v

提示出版本即为成功。

新建并初始化项目

新建一个项目文件夹hello-vue，作为项目文件夹。以下为命令行操作（cmd命令）

cd hello-vue
npm init -y

会自动在hello-vue下新建一个package.json文件，提示如下。

Wrote to C:\prog\hello-vue\package.json:

{
  "name": "hello-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

修改package.json文件，在scripts后添加dev及build内容，修改完成后如下：

{
  "name": "hello-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

新建文件夹docs，目的是把整个项目的结构建立起来，项目结构如下：

├─ config
│ ├─ navConfig.js
│ └─ sidebarConfig.js
├─ docs
│ ├─ .vuepress
│ └─ public
│ └─ img
│ └─ favicon.ico
│ └─ styles
│ └─ index.styl
│ └─ palette.styl
│ └─ config.js
│ └─ base
│ └─ baseConfig.md
│ └─ baseMenu.md
│ └─ README.md
│ └─ problem
│ └─ problem1.md
│ └─ problem2.md
│ └─ README.md
│ └─ README.md
└─ package.json
我们在hello-vue下用命令行建立文件夹docs，直接在文件夹hello-vue下鼠标右击新建文件夹也可以

mkdir docs
cd docs
echo "## Hello VuePress" > README.md

此操作在docs文件夹下新建了文件README.md，并写入了字符Hello VuePress。（文件名称必须为README.md，会自动识别md文档）

构建项目

hello-vue文件夹下用命令行运行

npm run build

构建出.vuepress文件夹，在.vuepress文件夹下新建config.js文件

//config.js
const navConfig = require('../../config/navConfig.js')
const sidebarConfig = require('../../config/sidebarConfig.js')

module.exports = {
    title: 'hello-vue', 
    description: 'hello-vue', 
    head: [
        ['link', { rel: 'icon', href: '/img/favicon.ico' }], 
        ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
    ],
    themeConfig: { //主题
        lastUpdated: 'Last Updated', //最后更新时间
        nav: navConfig, //导航栏在navConfig.js中配置
        sidebar: sidebarConfig, //侧边栏在sidebarConfig.js中配置
        sidebarDepth: 2, //最大的深度为 2，将同时提取 h2 和 h3 标题
    },
    markdown: { //markdown
        lineNumbers: true //显示行号
    }
}

以上配置使用了navConfig.js和sidebarConfig.js，用来配置导航栏和侧边栏。我们在hello-vue/config文件夹下创建这两个文件

//navConfig.js
module.exports = [
    { text: '主页', link: '/' },
    { text: '基础', link: '/base/' }
]

//sidebarConfig.js
module.exports = [
    {
        title: '介绍',
        collapsable: true,
        children: [
            ['/base/', '基础'],
            ['/base/baseMenu', '介绍'],
        ]
    },
	{
        title: '联系我们',
        collapsable: false,
        children: [
			{ title: '联系我们', path:'/contactus/'}
        ]
    },
    {
        title: '问题',
        collapsable: true,
        children: [
            ['/problem/', '问题'],
            ['/problem/problem1', '问题1'],
            ['/problem/problem2', '问题2']
        ]
    }
]

运行项目

hello-vue文件夹下用命令行运行

npm run dev

在浏览器地址栏输入http://localhost:8080/

参考资料

https://segmentfault.com/a/1190000020097643
https://b.himnt.top/blog/base/
http://caibaojian.com/vuepress/guide/
https://www.jianshu.com/p/13f45e24b1de