Vitepress搭建组件库文档（下）—— 组件 Demo

上文 《Vitepress搭建组件库文档（上）—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置，包括站点 Logo、名称、首页 home 布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像 Element Plus 那样一遍代码就可以展示组件的效果和源代码。

1 组件 Demo 的实现效果

vitepress 对 MarkDown 支持比较好，同时对 vue3 也支持较好。常见的在 MD 文档中展示 Demo 有两种方式：

1. 在一个区块内展示，添加插件用来解析 demo 区块，如：

组件基本使用：

:::demo 描述信息

:::
1
2
3
4
5
6
7

2. 封装一个组件，将 Demo 代码的语言、路径传递给该组件，然后在 MD 文档中使用该组件，如：

组件基本使用：


1
2
3
4

如果某个组件文档中 demo 较少，可以使用第一种方式，直接在 MD 文档中编写组件 demo；但如果 demo 较多或 demo 实现较复杂，可以使用第二种方式。所以最好两种方式都支持。

在 vitepress 1.0 之前（如 0.22.0），vitepress-theme-demoblock 是个非常好的选择，支持区块内的方式展示 Demo 和示例代码，但从 npmjs 上面可以看到该插件有一年多没更新了，在 vitepress 1.0 中会报错。不停搜索，总算找到一个可以很好支持 vitepress 1.0 的插件 —— vitepress-demo-preview，这里非常感谢 vitepress-demo-preview 的作者 flingyp 大神！

2 集成 @vitepress-demo-preview

2.1 安装依赖

pnpm add @vitepress-demo-preview/component @vitepress-demo-preview/plugin
1

2.2 config.ts

修改 docs/.vitepress/config.ts，添加 markdown 配置：

import {
    componentPreview
1