VitePress搭建技术文档

VitePress

使用vitepress搭建类似element-plus、layui-vue、Naive UI等技术文档博客。

个人认为vitepress就是vite+vue3+markdown。

一、vitepress 创建项目

// 1.创建demo文件夹，并且进入demo文件夹

mkdir demo && cd demo

// 2.使用npm命令初始化项目，会生成一个package.json文件

npm init

// 3.使用npm命令安装vitepress

npm  install --dev vitepress

4、在项目的根目录下创建一个docs文件夹，在其目录下创建一个index.md文件

touch index.md

5、在 package.json.添加一些script命令

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

7、启动项目

npm run docs:dev

8、文档结构:

|-- docs
|-- docs |-- .vitepress |-- config.js
|-- docs |-- theme |-- index.js
|-- docs |-- index.md
|-- node_modules
|-- packgae.json

二、配置

VitePress 带有默认主题，并提供许多开箱即用的功能。主题涵盖了导航栏、侧边栏、上下页按钮、编辑链接、最近更新日期、列表、搜索、团队组件等多个功能。

• base
• lang
• title
• description

在docs/.vitepress/theme/index.js文件中(若是项目没有，自己创建这些 )

配置文件config.js

{
	base:'',
	title:''，
	lang:'',
	description:'',
	themeConfig:{
		nav:[],
		sidebar:[]
	}
}

2.1 导航栏 nav设置

thenConfig:{
	nav:[
		{text:'首页',link:'/home/'},
		{text:'指南',link:'/guide/'},
		{text:'gitee',link:'https://gitee.com/demo'},
		{text:'github',link:'https://github.com/demo'},
	]
}

2.2 侧边栏 sidebar设置

thenConfig:{
	sidebar:{
		
	}
}

三、布局

在vitepress中有四种文档布局方式：

• home
• doc
• page

还有一种文档布局为

3.1 home文档布局

---
layout: home
---

3.2 doc文档布局

---
layout: doc
---

3.3 page文档布局

---
layout: page
---