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 目錄下依次建立下列檔案：

1. 元件庫首頁 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: