lydiali9 / vitrpress-doc-plugin

基于vitepress快速搭建组件库文档示例

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>
:::