🎉 简介

本插件基于 vitepress、 markdown-it 和 unified 实现，它可以帮助你在编写文档的时候，对嵌入的 Vue 示例代码增加演示功能，支持的 Vue 组件形式有 SFC, JSX, TSX

🏄‍♂️ 插件包

Package	Version	Download
@vitepress-code-preview/container
@vitepress-code-preview/plugin

⚙ 安装

1pnpm add @vitepress-code-preview/container @vitepress-code-preview/plugin

🚀 引入

• ① 编辑 docs/vite.config.ts，注册 Vite 插件，如果需要支持 JSX 组件，请安装 @vitejs/plugin-vue-jsx

1import { defineConfig } from 'vite'
2import vueJsx from '@vitejs/plugin-vue-jsx'
3import { viteDemoPreviewPlugin } from '@vitepress-code-preview/plugin'
4export default defineConfig({
5  plugins: [viteDemoPreviewPlugin(), vueJsx()],
6})

• ② 编辑 docs/.vitepress/config.ts，注册 markdown 插件

1import { fileURLToPath, URL } from 'node:url'
2import { defineConfig } from 'vitepress'
3import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'
4
5export default defineConfig({
6  markdown: {
7    config(md) {
8      const docRoot = fileURLToPath(new URL('../', import.meta.url))
9      md.use(demoPreviewPlugin, { docRoot })
10    },
11  },
12})

• ③ 编辑 docs/.vitepress/theme/index.ts，注册组件容器

1import type { Theme } from 'vitepress'
2import DefaultTheme from 'vitepress/theme'
3import DemoPreview, { useComponents } from '@vitepress-code-preview/container'
4import '@vitepress-code-preview/container/dist/style.css'
5
6export default {
7  ...DefaultTheme,
8  enhanceApp(ctx) {
9    useComponents(ctx.app, DemoPreview)
10  },
11} satisfies Theme

💡 基础用法

在demo容器中直接编写vue代码

1:::demo
2
3```vue
4<template>
5  <div>{{ title }}</div>
6</template>
7<script lang="ts" setup>
8import { ref, defineComponent } from 'vue'
9const title = ref('this is basic demo')
10</script>
11```
12
13:::

💪 支持 JSX 和 TSX

1:::demo
2
3```jsx
4import { defineComponent, ref } from 'vue'
5
6export default defineComponent({
7  setup() {
8    const title = ref('this is jsx demo')
9    return () => <div>{title.value}</div>
10  },
11})
12```
13
14:::

✨ 使用其他已注册的组件

假设我们有一个第三方的Button组件已经在.vitepress/theme/index.ts中注册过了，那么就可以在demo容器中使用它

1// ...
2export default {
3  ...DefaultTheme,
4  enhanceApp(ctx) {
5    // ...
6    useComponents(app, Button, Button.name)
7  },
8} satisfies Theme

1:::demo
2
3```vue
4<template>
5  <MoButton>默认按钮</MoButton>
6  <MoButton type="primary">主要按钮</MoButton>
7  <MoButton type="success">成功按钮</MoButton>
8  <MoButton type="info">信息按钮</MoButton>
9  <MoButton type="warning">警告按钮</MoButton>
10  <MoButton type="danger">危险按钮</MoButton>
11</template>
12```
13
14:::

⚡ 直接引入组件文件

如果你的示例代码比较多，在 markdown 中直接写会比较麻烦，那么可以引入一个单独的组件文件，引入的路径是以docs目录作为根目录

1:::demo src=examples/Input.vue
2:::