【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建

本系列已更新文章：
分享一个实用的 vite + vue3 组件库脚手架工具，提升开发效率
开箱即用 yyg-cli 脚手架：快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包
Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

前面完成了组件库的开发环境搭建和 example，咱们可以在 example 中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用，这时候就需要通过文档来展示组件库的使用以及各个组件的 API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用 vitepress 来实现，在之前的文章《vitepress搭建组件库文档》已经详细介绍了 vitepress 1.0 的使用，该文章中谈到的内容本文就快速略过。

1 搭建组件库文档环境

1.1 初始化工程

前面在工程根目录创建 docs 目录，在命令行中进入 docs 目录，使用 pnpm 初始化：

pnpm init
1

安装 vitepress 为开发依赖：

pnpm install vitepress -D
1

修改 package.json 文件的 name，并添加 scripts：

{
   
  "name": "@yyg-demo-ui/docs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "dev": "vitepress dev",
    "build": "vitepress build",
    "serve": "vitepress serve"
  },
  "keywords": [],
  "author": "程序员优雅哥",
  "license": "ISC",
  "devDependencies": {
   
    "vitepress": "1.0.0-alpha.28"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.2 创建目录及文件

在 docs 目录下创建 .vitepress、public、components、demos、guide，分别存放 vitepress 配置文件、公共资源目录、组件文档描述、文档中的 demo、组价库的其他说明文档。放一个 logo.png 图片到 public 目录下。

继续在 docs 目录下依次创建下列文件：

1. 组件库首页 index.md：