VuePress——静态文档生成器

1，介绍

由md生成文档网站。官网：https://v2.vuepress.vuejs.org/zh/
这里用的是2.0版本。

Vue的官网就是它做的。

2，简单使用

初始化yarn项目，安装vuepress。

yarn init -y

yarn add -D vuepress@next

添加启动脚本。

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

创建文件夹docs，创建文件README.md。

# A
## AA
### AAA
#### AAAA
##### AAAAA
###### AAAAAA

运行启动脚本。

三级导航，黑夜模式。

3，简单配置

docs下.vuepress下config.js

module.exports = {
    
    
  // 站点配置
  lang: 'zh-CN',
  title: '你好， VuePress ！',
  description: '这是我的第一个 VuePress 站点',

  // 主题和它的配置
  theme: '@vuepress/theme-default',
  themeConfig: {
    
    
    logo: 'https://vuejs.org/images/logo.png',
  },
}

需要重启server，效果：

全部配置：https://v2.vuepress.vuejs.org/zh/reference/config.html

4，添加更多页面

一个md对应一个页面。

docs下添加文件夹a，内部添加b.md。
那么访问路径为：http://localhost:8080/a/b.html

如果文件名是README.md，则文件名可以省略。

5，md的写法

官方文档：https://v2.vuepress.vuejs.org/zh/guide/markdown.html

6，顶部导航区

在配置里面弄。

themeConfig: {
    
    
	navbar: [
		// NavbarItem
		{
    
    
			text: 'Foo',
			link: '/foo/',
		},
		// NavbarGroup
		{
    
    
			text: 'Group',
			children: ['/group/foo.md', '/group/bar.md'],
		},
	],
	logo: 'https://vuejs.org/images/logo.png',
}

效果：

7，更多细节

各种主题，插件。官方文档都有。

插件生态系统：https://github.com/vuepress/awesome-vuepress/blob/main/v2.md