这是我参加第五届青训营伴学笔记创作活动的第9天。
完成了组件库的编写之后该干什么？当然是打包然后编写组件库的文档啦！下面将介绍如何使用VitePress来构建属于自己的Vue组件库文档。
VitePress是一种文档站点构建工具，可以使用Markdown和Vue来构建你的文档站。它是VuePress的小兄弟。VuePress基于Webpack构建，它的启动速度相对较慢。而VitePress基于Vite构建，启动速度相比于VuePress会快很多。
构建Vitepress
首先需要安装Vitepress，安装方式按照你的包管理工具而定，记得使用-D来保存到开发环境。
安装好了之后，将如下语句添加到packages.json的scripts节点中，以便启动。
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs",
这三句语句分别是用于启动dev模式、打包、serve模式的语句，在正式发布之前，使用dev模式来编写文档。
首先启动一下dev模式。启动完成之后，你的根目录会出现一个docs的目录，这个就是VitrePress
文档的目录，让我们来看一下里面有什么。
└─docs
│ index.md
│
└─.vitepress
│ config.ts
│
├─cache
└─theme
index.ts
docs/index.md是你的首页文件。
.vitepress里是一些配置文件，config.ts是该文档的一些配置的文件，可以配置顶部导航栏、侧边栏等等。
在theme里，可以引入你打包好的组件（不需要npm发布）和样式。
如果想要另起一个新页面，在docs目录下创建markdown文件即可。
如果想要类似VitePress的布局，可以在首页添加layout:home语句。
配置config
在config.ts中，我们可以做许多与文档相关的配置，将文件默认暴露出一个对象即可。当然，如果不引入些工具是看不见需要导出的对象有什么配置项，更别说写配置了。所以，我们可以从vitepress包里引入defineConfig，这样暴露可以写成这样的形式
export default defineConfig({
...
})
这样，在编写的时候，IDE会给予提示，下面给出一些常用配置。
-
sidebar: 侧边栏配置
-
nav: 顶部导航栏位置
-
head: html的head标签配置，可以添加一些标签在产物的head位置。例如，可以添加logo给自己的文档站。
-
title: 站点的标题
-
markdown: 一些markdown插件，以后可以用来做显示组件代码的demo
其中，sidebar和nav是属于themeConfig的子配置项。
不过，直接在config里写sidebar和nav，因为这两个配置的格式，会导致代码会非常长，比较好的建议是在.vitepress目录下另起一个目录config，将这两个配置都分别写一个ts文件来记录。
配置theme
theme的工作是一些插件的导入。
我们在theme里可以导入打包好的组件库，以及一些demo组件
总结
这样，你的文档站基本配置好了，可以进行文档站的编写了。
