https://blog.ohtly.com/tags/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/ Recent content in 开发工具 on OHTLY Blog Hugo zh-cn Mon, 11 May 2026 12:40:00 +0800 https://blog.ohtly.com/posts/2026-05-11-%E4%BD%BF%E7%94%A8-slidev-%E7%BC%96%E5%86%99%E5%B9%BB%E7%81%AF%E7%89%87%E6%8C%87%E5%8D%97/ Mon, 11 May 2026 12:40:00 +0800 https://blog.ohtly.com/posts/2026-05-11-%E4%BD%BF%E7%94%A8-slidev-%E7%BC%96%E5%86%99%E5%B9%BB%E7%81%AF%E7%89%87%E6%8C%87%E5%8D%97/ <h1 id="用-slidev-打造你的第一个幻灯片"> 用 Slidev 打造你的第一个幻灯片 <a class="heading-link" href="#%e7%94%a8-slidev-%e6%89%93%e9%80%a0%e4%bd%a0%e7%9a%84%e7%ac%ac%e4%b8%80%e4%b8%aa%e5%b9%bb%e7%81%af%e7%89%87"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h1> <blockquote> <p>基于真实项目 <code>slidev-in-action</code> 的完整实战指南</p></blockquote> <p>生成的幻灯片项目截图：</p> <p><img src="https://blog.ohtly.com/images/slidev-guide/combined-2rows.png" alt=""></p> <h2 id="1-为什么选择-slidev"> 1. 为什么选择 Slidev？ <a class="heading-link" href="#1-%e4%b8%ba%e4%bb%80%e4%b9%88%e9%80%89%e6%8b%a9-slidev"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h2> <p>传统的 PPT 工具（PowerPoint、Keynote）虽然功能强大，但在开发者场景下存在明显痛点：</p> <ul> <li><strong>版本控制困难</strong>：二进制文件难以用 Git 管理，协作时冲突频发</li> <li><strong>代码展示简陋</strong>：粘贴代码后丢失高亮，更新代码需要手动同步</li> <li><strong>排版效率低</strong>：调字体、拉对齐线耗费大量时间</li> <li><strong>分享不灵活</strong>：导出 PDF 后无法交互，网页分享需要额外上传</li> </ul> <p><strong>Slidev</strong> 是一个基于 Vue 的幻灯片引擎，它将 Markdown 文件渲染为交互式网页演示。对开发者而言，它的优势显而易见：</p> <ul> <li>✅ 用 <strong>Markdown</strong> 编写内容，专注表达而非排版</li> <li>✅ <strong>代码高亮</strong> 原生支持，支持行号、聚焦、动画</li> <li>✅ <strong>版本控制友好</strong>，Git diff 清晰可读</li> <li>✅ 内置 <strong>Mermaid</strong> 图表、<strong>LaTeX</strong> 公式、<strong>Vue 组件</strong> 支持</li> <li>✅ 一键导出 <strong>PDF / PPTX</strong>，也可部署为静态站点</li> </ul> <p>如果你经常做技术分享、内部培训或开源项目演示，Slidev 几乎是最佳选择。</p> <hr> <h2 id="2-环境准备与安装"> 2. 环境准备与安装 <a class="heading-link" href="#2-%e7%8e%af%e5%a2%83%e5%87%86%e5%a4%87%e4%b8%8e%e5%ae%89%e8%a3%85"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h2> <h3 id="前置要求"> 前置要求 <a class="heading-link" href="#%e5%89%8d%e7%bd%ae%e8%a6%81%e6%b1%82"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h3> <ul> <li><strong>Node.js</strong> &gt;= 18.0（推荐 LTS 版本）</li> <li>包管理器：<strong>npm</strong>、<strong>yarn</strong> 或 <strong>pnpm</strong></li> </ul> <h3 id="安装-slidev-cli"> 安装 Slidev CLI <a class="heading-link" href="#%e5%ae%89%e8%a3%85-slidev-cli"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h3> <p>在已有 Node.js 环境的项目中，直接安装 Slidev 的命令行工具：</p>