Skip to content

🎉 简介

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

🏄‍♂️ 插件包

PackageVersionDownload
@vitepress-code-preview/containernpm versionnpm downloads
@vitepress-code-preview/pluginnpm versionnpm downloads

⚙ 安装

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

🚀 引入

  • ① 编辑 docs/vite.config.ts,注册 Vite 插件,如果需要支持 JSX 组件,请安装 @vitejs/plugin-vue-jsx
ts
import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { viteDemoPreviewPlugin } from '@vitepress-code-preview/plugin'
export default defineConfig({
  plugins: [viteDemoPreviewPlugin(), vueJsx()],
})
  • ② 编辑 docs/.vitepress/config.ts,注册 markdown 插件
ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vitepress'
import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'

export default defineConfig({
  markdown: {
    config(md) {
      const docRoot = fileURLToPath(new URL('../', import.meta.url))
      md.use(demoPreviewPlugin, { docRoot })
    },
  },
})
  • ③ 编辑 docs/.vitepress/theme/index.ts,注册组件容器
ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import DemoPreview, { useComponents } from '@vitepress-code-preview/container'
import '@vitepress-code-preview/container/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    useComponents(ctx.app, DemoPreview)
  },
} satisfies Theme

使用示例

💡 基础用法

demo容器中直接编写vue代码

md
:::demo

```vue
你的代码
```

:::

💪 支持 JSX 和 TSX

md
:::demo

```jsx
你的代码
```

:::

✨ 使用其他已注册的组件

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

ts
// ...
export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    // ...
    useComponents(app, Button, Button.name)
  },
} satisfies Theme
md
:::demo

```vue
<template>
  <MoButton>默认按钮</MoButton>
  <MoButton type="primary">主要按钮</MoButton>
  <MoButton type="success">成功按钮</MoButton>
  <MoButton type="info">信息按钮</MoButton>
  <MoButton type="warning">警告按钮</MoButton>
  <MoButton type="danger">危险按钮</MoButton>
</template>
```

:::

⚡ 直接引入组件文件

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

md
:::demo src=examples/Input.vue
:::

Updated at:

MIT License