Vitepress Doc Plugin
快速搭建组件库文档示例
特性
- 开箱即用，无需配置
- 支持代码块展开与收起
- 支持复制代码
- 支持代码块高亮
- 支持暗黑模式
- 组件即示例，无需额外写示例代码
- 基于vitepress，速度更快
vitepress版本需大于1.0
快速开始
// npm
npm i vitrepss-doc-plugin -S
// pnpm
pnpm i vitrepss-doc-plugin -S// .vitepress/theme/index.js(ts)
import DefaultTheme from "vitepress/theme"
import "vitepress-doc-plugin/style.css"
import {Demo} from "vitepress-doc-plugin"
export default {
...DefaultTheme,
enhanceApp: ({ app }) => {
// 省略其他配置
app.component("Demo", Demo)
},
}// .vitepress/config.js(ts)
import { markdownConfig } from "vitepress-doc-plugin"
export default {
// 省略其他配置
markdown: {
config: markdownConfig,
},
}完整例子如下
<script setup>
# 引入例子组件
import basic from './basic.vue';
</script>
# 按钮
## 基础用法
// button/basic是docs/component相对路径必填，否则查看不了源码
:::demo button/basic
// 组件例子显示，内部会以slot插入
<basic></basic>
:::