在 vite 出現以前，vuepress 是搭建組件庫文檔不錯的工具，支持以 Markdown 方式編寫文檔。伴隨著 vite 的發展，vitepress 已經到了 1.0.0-alpha.22 版本，很多博客還是基於 0.x 版本，1.0.0 與 0.22 配置略有差別，尤其是一些 vitepre ...
在 vite 出現以前，vuepress 是搭建組件庫文檔不錯的工具，支持以 Markdown 方式編寫文檔。伴隨著 vite 的發展，vitepress 已經到了 1.0.0-alpha.22 版本，很多博客還是基於 0.x 版本，1.0.0 與 0.22 配置略有差別，尤其是一些 vitepress 插件不支持 1.0.0 版本，如 vitepress-theme-demo（用它可以方便的編寫組件 demo）。雖然現在 1.0.0 還是 alpha 版本，咱也可以嘗試使用，反正遇到什麼坑就去填什麼坑就可以了唄。
1 初始化工程
1.1 創建項目
創建目錄（目錄名自己取，這裡我取名為 doc-vitepress-archetype）作為文檔項目的根目錄，在命令行進入該目錄，使用 npm/yarn/pnpm 初始化為 npm 項目（生成 package.json）。
pnpm init
之前看過優雅哥文章的伙伴應該清楚，優雅哥一直習慣使用 yarn，但從本文開始，包管理工具我都換做 pnpm，具體原因在後面的搭建 monorepo 風格組件中再談。
添加 vitepress 為開發依賴：
pnpm install vitepress -D
當前 vitepress 版本為 1.0.0-alpha.22，後面如果發佈正式版後有 broken change，咱又更新文章。
1.2 創建目錄及文件
- 在項目根目錄下創建目錄 docs（這裡的目錄名 docs 與後面配置 package.json 中 scripts 的參數一致），併在 docs 目錄中創建 index.md 文件
# Hello Vitepress
- 在 docs 目錄下創建公共資源目錄 public，該目錄與 vite vue3 項目的 public 一樣，弄一個 logo.png 到該目錄中。
此時目錄結構為：
doc-vitepress-archetype/
|- docs/
|- index.md
|- public/
|- logo.png
|- package.json
1.3 添加 scripts
在 package.json 中添加項目的啟動、打包、預覽命令：
"scripts": {
"dev": "vitepress dev docs",
"build": "vitepress build docs",
"serve": "vitepress serve docs"
},
dev 是開發模式啟動 vitepress；build 為打包；serve 是對打包後的結果啟動服務預覽。命令參數中的 docs 就是上面在根目錄創建的目錄名 docs。
1.4 啟動服務
在控制台執行 pnpm dev，啟動服務，在頁面訪問控制台輸出的地址，預設該頁面支持 dark/light 切換。頁面如下
dark 模式：
light 模式：
出現上面的界面，則 vitepress 開發環境配置成功。
2 配置 vitepress
接下來便是 vitepress 的配置。
2.1 首頁配置
首先配置文檔首頁，讓其看起來像一個組件庫的首頁。首頁在 index.md 文件中使用 Frontmatter 編寫。Frontmatter 本質上就是在 MD 文件中編寫 yaml 獲取 JSON，位於兩個 --- 之間，且必須放在 MD 文件的頂部。可通過 Frontmatter 指定文檔的標題、佈局等屬性。具體屬性配置可以在官網上查看：
將 docs/index.md 內容修改如下：
---
layout: home
title: 選項卡標題
titleTemplate: 選項卡描述
editLink: true
lastUpdated: true
hero:
name: 組件庫名稱
text: 組件庫文本
tagline: 組件庫副標題描述
image:
src: /logo.png
alt: YYG Admin UI
actions:
- theme: brand
text: 快速開始
link: /guide/
- theme: alt
text: 組件
link: /components/
features:
- icon:
