Skip to content

LadyChatterleyLover/vitrpress-doc-plugin

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published