🔥 VitePress文档组件展示的血泪史 vs 插件优雅解决方案
💔 传统方式完整案例 - 看看你中了几枪？
📜 传统实现方式（痛苦版）：
假设我们要在文档展示一个Button组件
1️⃣ 第一步：配置注册组件
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import MyButton from '../components/MyButton.vue'
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
app.component('MyButton', MyButton) // 手动注册组件
}
}
2️⃣ 第二步：在md文件中双重编写
### 基础用法
```vue
<template>
<MyButton @click="handleClick">点击我</MyButton>
</template>
<script setup>
const handleClick = () => alert('点击事件')
</script>
```
实际效果：
<MyButton @click="handleClick">点击我</MyButton>
<script setup>
// 这里要重复写一遍逻辑！
const handleClick = () => alert('点击事件')
</script>
3️⃣ 第三步：处理样式问题
/* 手动适配暗黑模式 */
.vitepress-dark .demo-container {
background: #222;
border-color: #444;
}
✅ 用vitepress-democard-plugin后：
- 无需注册组件
- 无需重复编写
- 自动主题适配
<$./components/MyButton.vue$>
🎨 效果如下
-
demo卡片折叠
-
deme卡片展开
-
暗色主题
💣 传统方式的致命缺陷：
- ✖️ 每次新增组件都要修改theme配置
- ✖️ 相同逻辑要写两遍（演示+源码）
- ✖️ 暗黑模式要手动维护
- ✖️ 无法代码折叠/复制
- ✖️ 组件更新不会自动热重载
✨ 插件带来的革命性改变：
- 自动扫描组件无需注册
- 真正的"所见即所得"
- 智能主题切换
- 内置代码高亮/复制
- 组件修改即时热更新
🛠️ 完整对比表格：
| 功能 | 传统方式 | 插件方案 |
|---|---|---|
| 组件注册 | 手动 | 自动 |
| 代码重复 | 2份 | 1份 |
| 主题适配 | 手动 | 自动 |
| 代码交互 | 无 | 折叠/复制 |
| 开发体验 | 痛苦 | 流畅 |
👉 现在体验现代文档开发方式：\
pnpm add vitepress-democard-plugin -D
GitHub：github.com/qianyuanjia…
npm：www.npmjs.com/package/i18…
🆓 如果你有更多idea，可以fork二开，或者提PRS 🙏
