# VuePress

vuepress (opens new window) 是一个静态页面生成器，可以用来做笔记、写文档、说明书等！

# 使用步骤

提示

vuepress需要Node, 切版本>=8.6，命令 node -v

mkdir vuepress-demo
cd vuepress-demo

1
2

安装

npm install -g vuepress

初始化 package.json

npm init -y

3完成后，配置 package.json 添加如下两行

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

1
2
3
4
5
6

新建文件夹docs，进入文件夹，创建 README.md文件

mkdir docs
cd docs
echo # Hello > README.md

1
2
3

运行命令，成功后可以访问 http://localhost:8080/

npm run docs:dev

注意

此时，目录结构如下

vuepress-demo
├── docs
│   └── README.md
└── package.json

1
2
3
4

结束运行，执行命令

npm run docs:build

注意

执行完，目录结构发生变化

vuepress-demo
├── docs
│   ├── .vuepress
│   │   └── dist //打包后的文件夹
│   └── README.md
├── node_modules
└── package.json

1
2
3
4
5
6
7

我们在.vuepress 创建 config.js配置文件

module.exports = {
    title: 'BiuBiu',  // 设置网站标题
    description : '让坚持成为品质，让优秀成为习惯',
    base : '/note/',
    themeConfig : {
        nav : [ //导航栏
            { text: 'Home', link: '/home' },  // docs目录创建 home.md文件
            { text: 'Tool', link: '/tool' },  // docs根目录创建 tool.md文件
            { text: '关于', link: '/about' }  // docs根目录创建 about.md文件
        ],
        sidebar: 'auto',
        sidebarDepth : 2
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果

# 文档说明

首页配置

在docs下得README.md里可以配置首页，这个从官网抄过来的

---
home: true
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---

1
2
3
4
5
6
7
8
9
10
11
12
13

导航栏配置

nav : [
    { text: '主页', link: '/' },                //跳转docs下README.md文件
    { text: 'mobileapi', link: '/mobileapi/' }, //跳转docs/mobileapi/下README.md文件
    { text: 'passport', link: '/passport' },    //跳转docs下面passport.md文件， 结尾没有/
    { text: 'Guide', link: '/guide/' },         //跳转docs/guide/下README.md文件
    { text: '关于',
        items: [                                //子链接
            { text: '博客园', link: 'https://www.cnblogs.com/' },
            { text: '语雀', link: 'https://www.yuque.com/biubiu-note' },
            { text: 'Docsify', link: 'https://baijq.gitee.io/biubiunote/#/' },
            {
                text: '代码仓库',
                items: [                        //子链接嵌套子链接
                    { text: 'GitEE', link: 'https://gitee.com/baijq' },
                    { text: 'GitHub', link: 'https://github.com/baijq' }
                ]
            },
        ]
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

侧边栏配置，可以同步联动导航栏（/mobileapi/和nav里一样就可以）

sidebar: {
  '/mobileapi/': [
    {
      title: 'MobileAPI 指南',
      collapsable: false,
      children: [
        '/mobileapi/demo01',  # 跳转docs/mobileapi/demo01.md文件
        '/mobileapi/demo02'   # 跳转docs/mobileapi/demo02.md文件
      ]
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12

# 最后贴一个目录结构

完整目录结构

vuepress-demo
├── docs
│   ├── .vuepress
│   │   ├── dist      //打包后的文件夹
│   │   └── config.js //配置文件
│   ├── home (自己根据自己的结构定义文件夹 nav里 link /home/ 跳转 README.md) 
│   │   ├── demo01.md //侧边目录啥的
│   │   ├── demo02.md //侧边目录啥的
│   │   └── README.md
│   ├── tool (自己根据自己的结构定义文件夹 nav里 link /tool/ 跳转 README.md) 
│   │   └── README.md
│   ├── api (自己根据自己的结构定义文件夹 nav里 link /api/ 跳转 README.md) 
│   │   └── README.md
│   ├── about.md (自己根据自己的结构定义的md文件, nav里 link /about) 
│   └── README.md
├── node_modules
└── package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17