vitepress搭建vue3组件库

通过dumi搭建react组件库文档，编译速度是一个劣势，修改一个脚本，重新编译都要好久。考虑使用vite构建工具，最后选择vitepress来搭建文档系统。
主要原因：

vitepress 是基于vite的，构建速度快，更轻量，容易上手

添加vitePress文档

安装vitepress：

yarn add vitepress -D

创建第一个文档：

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可以配置左侧菜单

const sidebar = {
 '/': [
 { text: '快速开始', link: '/' },
 {
     text: '通用',
     children: [
     { text: 'Button 按钮', link: '/component/button/' },
     { text: 'Dialog 对话框', link: '/component/dialog/' }
    ]
 },
 {
    text: '导航'
 },
 {
    text: '反馈'
 },
 {
    text: '数据录入'
 },
 {
    text: '数据展示'
 },
 {
    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对应的vite.config.ts
保留环境配置参数，为以后业务组件多环境预留
vite-plugin-dts 提取ts文件
最后输出es，umd打包文件

打包命令：

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

至此，vitepress的vue3组件库文档搭建完毕
yarn docs:dev，本地运行组件库
yarn build:lib，打包输出组件库

组件库地址

vitepress搭建vue3组件库