通过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，打包输出组件库
