通過dumi搭建react組件庫文檔，編譯速度是一個劣勢，修改一個腳本，重新編譯都要好久?？紤]使用vite構(gòu)建工具，最后選擇vitepress來搭建文檔系統(tǒng)。
主要原因：

• vitepress 是基于vite的，構(gòu)建速度快，更輕量，容易上手

添加vitePress文檔

安裝vitepress：

yarn add vitepress -D

創(chuàng)建第一個文檔：

mkdir docs && echo '# Hello VitePress' > docs/index.md

增加腳本命令：

{ 
  "scripts": { 
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs", 
    "docs:serve": "vitepress serve docs" 
  }
}

本地啟動：
yarn docs:dev

瀏覽器訪問效果：

image.png

配置vitepress

VitePress有一個配置文件，docs/.vitepress/config.ts
themeConfig.sidebar可以配置左側(cè)菜單

const sidebar = {
 '/': [
 { text: '快速開始', link: '/' },
 {
     text: '通用',
     children: [
     { text: 'Button 按鈕', link: '/component/button/' },
     { text: 'Dialog 對話框', link: '/component/dialog/' }
    ]
 },
 {
    text: '導(dǎo)航'
 },
 {
    text: '反饋'
 },
 {
    text: '數(shù)據(jù)錄入'
 },
 {
    text: '數(shù)據(jù)展示'
 },
 {
    text: '布局'
 }]
}

查看效果：

image.png

配置vite.config.ts

在docs下配置vite.config.ts

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
 plugins: [vueJsx()]
})

添加packages組件目錄

添加一個DButton組件

index.ts中添加

import { App, Plugin } from 'vue'
import Button from './src/index.vue'

export const ButtonPlugin: Plugin = {
 install(app: App) {
    app.component('DButton', Button)
 }
}
export { Button }

src/index.vue中添加

<template>
 <button class="my-button" @click="$emit('click', $event)">1111</button>
</template>

<script lang="ts" setup>
defineEmits(['click'])
</script>

<style scoped lang="less">
.my-button {
   appearance: none;
   padding: 5px 10px;
   background: lightskyblue;
   border: none;
   border-radius: 4px;
   color: #fff;
 &:active {
    background: rgb(92, 185, 243);
 }
 &:not(:last-child) {
    margin-right: 15px;
 }
}
</style>

配置docs組件庫文檔

在入口注冊組件：
docs/.vitepress/theme/index.ts

import Theme from 'vitepress/dist/client/theme-default'
import { Button } from '../../../packages/Button'
import { Dialog } from '../../../packages/Dialog'

export default {
 ...Theme,
 enhanceApp({ app }) {
   app.component('m-button', Button)
   app.component('m-dialog', Dialog)
 }
}

demo文檔
button.md

# Button 按鈕
<m-button></m-button>
```vue
<template>
 <m-button>按鈕</m-button>
</template>
```
### API
````ts
type ButtonType = 'default' | 'primary'
````

啟動docs
yarn docs:dev
查看效果：

image.png

在src 中引入組件，看看效果

main.ts文件中

import { createApp } from 'vue'
import App from '@/App.vue'
import routers from '@/routes'
import store from '@/store/index'
import MyKit from '../packages'
import './index.css'
const app = createApp(App)
app.use(MyKit).use(routers).use(store).mount('#app')

在home/index.vue中使用組件

<m-button>測試按鈕組件</m-button>

啟動dev
yarn dev

查看效果：

image.png

打包lib

• 配置lib對應(yīng)的vite.config.ts
• 保留環(huán)境配置參數(shù)，為以后業(yè)務(wù)組件多環(huán)境預(yù)留
• vite-plugin-dts 提取ts文件
• 最后輸出es，umd打包文件

打包命令：

"build:lib": "vite build -m test --config ./build/config/lib.ts"

至此，vitepress的vue3組件庫文檔搭建完畢
yarn docs:dev，本地運(yùn)行組件庫
yarn build:lib，打包輸出組件庫

組件庫地址