在VitePress中快速展示Vue组件示例VitePress现在基本是开发一个vue项目文档的首选。因为VitePr

背景

VitePress现在基本是开发一个vue项目文档的首选。

因为VitePress本身就支持了在markdown文件中使用vue组件，参考文档:在 Markdown 使用 Vue。

但唯一的缺点是需要单独将SFC组件文件引入，以至于同一份代码要写两次，对于有强迫症的开发者来说是很难受的。以下是一个示例：

<script setup lang="ts">
import Basic from './basic.vue';
</script>

# Button

常用的操作按钮。

## 主要按钮

<Basic />

::: details 查看代码

<template>
  <e-button>Default</e-button>
  <e-button type="primary">Primary</e-button>
  <e-button type="success">Success</e-button>
  <e-button type="info">Info</e-button>
  <e-button type="warning">Warning</e-button>
  <e-button type="danger">danger</e-button>
</template>

:::

为了解决这个痛点，我开发了一个基于vitepress的插件 vitepress-vue-demo ，可以让文档通过组件路径，直接渲染 + 代码查看！

vitepress-vue-demo

简介

vitepress-vue-demo 是一个基于 Vitepress 开发的插件，它可以帮助你在编写文档的时候，通过路径引用，直接展示 Vue 组件示例 + 代码。

github源码：github.com/xinnian999/…

灵感来源：element-plus源码

安装

npm install -D vitepress-vue-demo
yarn add -D vitepress-vue-demo
pnpm add -D vitepress-vue-demo

使用

1、docs/.vitepress/config.ts 中为markdown增加扩展

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { mdVueDemoPlugin } from 'vitepress-vue-demo'


// https://vitepress.dev/reference/site-config
export default defineConfig({
  ...
  markdown: {
    config: (md) => {
      md.use(mdVueDemoPlugin)
    }
  }
})

2、docs/.vitepress/theme/index.ts 中注册组件。

将你项目中所有vue示例组件，统一放到一个目录下，例如docs/demos。

然后通过vite的import.meta.glob模块，将这个目录下所有vue组件导入进来，传给mdVueDemo组件即可！

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import type { Component } from 'vue'
import { mdVueDemo } from 'vitepress-vue-demo'
import 'vitepress-vue-demo/dist/style.css'

const modules = import.meta.glob<Component>('../../demos/**/*', { eager: true, import: 'default' })

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
     app.use(mdVueDemo, { modules })
  }
} satisfies Theme

3、在你的文档中，可以通过路径直接展示组件了！


## 按钮组件

::: demo

demos/Button.vue

:::

在VitePress中快速展示Vue组件示例

背景

vitepress-vue-demo

简介

安装

使用

更多用法