该系列已更新文章：
分享一个实用的 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
安装 vitepress 为开发依赖：
pnpm install vitepress -D
修改 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 创建目录及文件
在 docs 目录下创建 .vitepress、public、components、demos、guide，分别存放 vitepress 配置文件、公共资源目录、组件文档描述、文档中的 demo、组价库的其他说明文档。放一个 logo.png 图片到 public 目录下。
继续在 docs 目录下依次创建下列文件：
- 组件库首页 index.md：
---
layout: home
title: YYG-DEMO-UI
editLink: true
lastUpdated: true
hero:
name: yyg-demo-ui
text: YYG Vue3企业级中后台组件库
tagline: 组件库描述 / SLOGAN
image:
src: /logo.png
alt: yyg-admin-ui
actions:
- theme: brand
text: 快速开始
link: /guide/
- theme: alt
text: 组件
link: /components/foo
features:
- icon:
标签：components,demo,企业级,文档,vitepress,Vue3,组件,import
From： https://www.cnblogs.com/youyacoder/p/16903476.html