Appearance
最小成本实现组件demo展示
背景
在编写组件库的时候，我们一般会写一些文档，用以给其他开发者去查看和使用。但是仅仅只有文档还是不够的，我还需要提供演示的例子。
如果自己开发再去开发一个演示的插件，成本太高了，所以我就想着能不能直接使用vitepress配合一些插件来实现我们想要的效果。
下面我通过一个项目来展示如何实现。
创建一个新项目
创建一个新项目并进入到项目目录。
bash
mkdir vitepress-demo && cd vitepress-demo
然后初始化项目
bash
pnpm init
安装依赖
接下来我们安装一下环境所需要的依赖
bash
pnpm add vite vue vitepress vite-plugin-vitepress-demo -D
关于peer deps的警告
当我们使用pnpm去安装依赖的时候会发现有一些警告，这是因为@docsearch/js中依赖了peerDependencies，但是我们没有安装，所以会有警告，但是不影响使用。 如果你想要去掉这个警告，可以在package.json添加如下配置：
json
"pnpm": {
"peerDependencyRules": {
"ignoreMissing": [
"@algolia/client-search"
]
}
}
创建组件目录
接下来我们创建一个docs目录，用于存放我们的组件文档和示例。
bash
mkdir docs
配置vitepress-demo插件
在docs目录下创建一个vite.config.ts文件，用于配置vite-plugin-vitepress-demo插件。
ts
import { defineConfig } from 'vite'
import VitePluginVitepressDemo from 'vite-plugin-vitepress-demo'
export default defineConfig({
plugins: [
VitePluginVitepressDemo(),
],
})
在docs下创建一个.vitepress的目录，用于存放vitepress的配置文件。
下面我们引用一下vite-plugin-vitepress-demo中的主题。
在.vitepress下创建theme文件夹，然后在theme下创建index.ts文件，配置如下：
ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
export default {
...DefaultTheme,
enhanceApp({ app }) {
app.component('Demo', AntdTheme)
},
} as Theme
具体的配置项可以参考vite-plugin-vitepress-demo
创建demos目录
在docs目录下创建一个demos目录，用于存放我们的组件示例。
bash
mkdir demos
创建组件示例
在demos目录下创建一个test.vue文件，来编写我们的组件示例。
vue
<template>
<div>
<h1>Counter</h1>
<p>Counter demo</p>
<p>{{ counter }}</p>
<button @click="inc">
inc
</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const counter = ref(0)
const inc = () => counter.value++
</script>
创建组件文档
在docs目录下创建一个index.md文件，来编写我们的组件文档并引入我们的组件示例。
md
## 组件展示示例
<demo src="./demos/basic.vue" title="Counter" desc="This is Counter demo"></demo>
配置package.json
在package.json中添加如下配置：
json
{
"type": "module",
"scripts": {
"dev": "vitepress dev docs",
"build": "vitepress build docs",
"preview": "vitepress serve docs"
}
}
启动项目
bash
pnpm dev
效果展示
Counter
This is Counter demo