該系列已更新文章： 分享一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率 開箱即用 yyg-cli 腳手架：快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...
該系列已更新文章：
分享一個實用的 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:
