- 难度
- 中等
- 适合
- 零基础 / 入门 / 进阶
- 主要语言
- TypeScript
- GitHub
- ★ 48.0k
- 许可证
- MIT
- 快照日期
- 2026年8月9日
先判断要不要学
这个项目值得拆什么？
Slidev 是为开发者设计的演示工具，用 Markdown 管内容，同时允许在页面中使用 Vue 组件、UnoCSS、Shiki、Mermaid 和主题包。它把一个明确的用户任务拆成 CLI、解析、客户端、主题、导出和文档等包，是学习“结构化文本如何变成交互产品”的优秀中型案例。
- 01
只修改 demo 就能得到即时可见成果，对初学者的反馈周期很短
- 02
主题、插件、导出和嵌入 Vue 组件展示了良好的扩展性设计
可以学什么
不只是看代码，而是找到产品的骨架
- 学界面
- 学产品结构
- 学部署
- 学完整项目组织
从 Markdown 到交互页面
追踪幻灯片分隔、frontmatter、布局和 Vue 组件如何被转为应用。
packages/parser · packages/slidev · packages/client可分发的主题与插件
学习如何用 npm 包封装布局、样式和组件，同时保留用户覆写点。
packages/theme-default · demo · docs一份内容的多种输出
从预览、演讲者模式到 PDF、PNG 和 PPTX 导出，理解产品主链路的扩展。
packages/slidev · packages/client · packages/exporter三段学习路径
从理解、修改到做出你的版本
0130 分钟先跑通
用 Markdown 做出一份可演示的文稿。
- 按 README 初始化项目
- 阅读 demo 的页面分隔与 frontmatter
- 增加代码高亮和 Mermaid 图
完成标志：得到一份可演示、可修改的开发者幻灯片。
022 小时动手改
做一个可复用的定制布局。
- 对照 packages/theme-default 理解布局约定
- 新增一个 Vue 布局组件
- 用 UnoCSS 定义视觉规则
完成标志：得到一个可在多页复用的个人布局。
031 天做变体
做一份带交互演示的完整教学内容。
- 定义受众和一条教学主线
- 嵌入一个可操作 Vue 组件
- 增加演讲者提示
- 验证 PDF 或 PPTX 导出
完成标志：得到一份可在线分享也可离线交付的互动课件。
评分解释
每一分都要说清楚为什么
可复刻性24 / 25
初始化、改内容和部署的路径极短。
文档与代码清晰度19 / 20
README、多语文档、demo 和包边界都很清楚。
新手学习价值19 / 20
反馈快，同时能逐步学 Markdown、Vue 和工程扩展。
产品完整度14 / 15
创作、预览、演示、录制与导出链路完整。
vibe coding 代表性9 / 10
非常适合 AI 协作生成内容后由人调整结构和风格。
活跃度5 / 5
仓库活跃，技术栈与文档持续升级。
新颖性4 / 5
可编程演示的产品形态鲜明且易于再创作。