VuePress - Static Documentation Generator

1 Introduction

The documentation website is generated by md. Official website: https://v2.vuepress.vuejs.org/zh/
Version 2.0 is used here.

Vue's official website is what it does.

2. Simple to use

Initialize the yarn project and install vuepress.

yarn init -y

yarn add -D vuepress@next

Add startup script.

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

Create folder docs, create file README.md.

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

Run the startup script.

Three-level navigation, night mode.

3. Simple configuration

config.js under .vuepress under docs

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

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

Need to restart the server, the effect:

Full configuration: https://v2.vuepress.vuejs.org/zh/reference/config.html

4. Add more pages

One md corresponds to one page.

Add folder a under docs, and add b.md inside.
Then the access path is: http://localhost:8080/a/b.html

If the filename is README.md, the filename can be omitted.

5, the writing method of md

Official documentation: https://v2.vuepress.vuejs.org/zh/guide/markdown.html

6, the top navigation area

Get it in the config.

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

Effect:

7. More details

Various themes, plugins. There are official documents.

Plugin Ecosystem: https://github.com/vuepress/awesome-vuepress/blob/main/v2.md