每個組件庫都有它們自己的文檔。所以當我們開發完成我們自己的組件庫必須也需要一個組件庫文檔。如果你還不瞭解如何搭建自己的組件庫可以看這裡->從零搭建Vue3組件庫。看完這篇文章你就會發現原來搭建和部署一個組件庫文檔是那麼的簡單。當然部署也不需要你有自己的伺服器，你只要有github即可。由於我們的組件 ...
每個組件庫都有它們自己的文檔。所以當我們開發完成我們自己的組件庫必須也需要一個組件庫文檔。如果你還不瞭解如何搭建自己的組件庫可以看這裡->從零搭建Vue3組件庫。看完這篇文章你就會發現原來搭建和部署一個組件庫文檔是那麼的簡單。當然部署也不需要你有自己的伺服器，你只要有github即可。由於我們的組件庫還沒有完成，所以下麵就以element-plus作為示例來搭建一個文檔吧。
安裝vitepress
首先新建文件夾就叫kittydocs,執行pnpm init初始化，然後安裝vitepress
pnpm add vitepress -D
在 package.json添加一些script
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
安裝組件庫element-plus
pnpm i element-plus -S
目錄結構
新建kittydocs目錄，其中文件結構如下圖
- .vitepress/config.js為配置文件
- .vitepress/theme/index.js為自定義主題
- examples作為為組件示例目錄
- public是公共文件目錄
- index.md則是組件庫文檔的首頁
- gulild放我們組件指南文檔
文檔首頁
首先我們按照官網的樣式給我們組件庫整個首頁，在index.md文件中寫入
---
layout: home
title: Kitty
titleTemplate: 一個Vue3組件庫
hero:
name: Kitty
text: 一個Vue3組件庫
tagline: 沒啥特點僅供學習
image:
src: /logo.png
alt: Kitty
actions:
- theme: brand
text: 開始
link: /guide/
- theme: alt
text: 在 Gitee 上查看
link: https://gitee.com/geeksdidi/kittyui
features:
- icon:
