文章

Slidev入门指南

Slidev是一个用于创建演示文稿的现代化框架，支持Markdown格式和交互式幻灯片。

发表于
作者 Cerberus
11 分钟阅读
Slidev入门指南

安装方式

Slidev 官方现在推荐使用 pnpm 作为首选包管理器来创建新项目。

官方文档明确提到，不推荐使用 npm init slidev@latest，因为 npm 每次创建新项目都会重新下载包，速度较慢且占用大量空间。

推荐的安装方式（使用 pnpm）

第一步：安装 pnpm（如果还没安装）

pnpm 安装指南

第二步：创建 Slidev 项目

1

pnpm create slidev

然后按照命令行的提示操作：

  • 输入项目名称（例如 my-slides）
  • 选择是否启用 TypeScript
  • 选择主题（可以先选默认主题）

第三步：进入项目并启动

1
2

cd my-slides
pnpm dev

浏览器会自动打开 http://localhost:3030，就能看到你的幻灯片了。

其他包管理器方式

如果你更习惯使用其他包管理器，Slidev 也支持以下方式：

包管理器创建命令
npmnpm init slidev@latest（不推荐）
yarnyarn create slidev
bunbun create slidev
denodeno init --npm slidev

全局安装方式（不推荐）

如果你希望使用单个 Markdown 文件作为幻灯片（不创建完整项目），可以全局安装 Slidev CLI：

1

pnpm i -g @slidev/cli

然后直接运行：

1

slidev slides.md

环境要求

无论使用哪种方式，请确保你的 Node.js 版本 >= 22.0（官方文档要求）。如果你使用的是较旧版本的 Node.js，可能会遇到安装或运行时的兼容性问题。

创建项目的方式

假如我要做ppt，那么每做一个ppt都要这样新创建一个项目吗？

不一定。你既可以每做一个PPT都创建一个独立项目，也可以在一个项目中管理所有幻灯片，两种方式各有优劣。

方案一：多项目模式（推荐）

适合场景：每次做PPT都需要特定的主题、组件或配置，或者希望保持内容独立、方便迁移。

做法：每个PPT单独创建一个项目。

1
2
3

# 为每个PPT单独创建项目
pnpm create slidev presentation-1  # 项目1
pnpm create slidev presentation-2  # 项目2

优点：项目相互隔离、配置独立、可单独打包部署。

缺点：每个项目都要安装依赖（约20-30MB），占用更多磁盘空间，且无法复用组件和样式。

方案二：单项目多幻灯片模式

适合场景：频繁制作PPT，希望复用主题、组件和配置，节省磁盘空间。

做法：在一个项目中管理所有幻灯片。

1
2
3
4
5
6
7
8
9

my-slides-workspace/              # 一个项目
├── slides/                       # 存放所有幻灯片
│   ├── talk-1.md
│   ├── talk-2.md
│   └── talk-3.md
├── components/                   # 共享组件
├── styles/                       # 共享样式
├── public/                       # 共享资源
└── package.json

运行指定幻灯片：

1
2

pnpm slidev slides/talk-1.md
pnpm slidev slides/talk-2.md

批量构建所有幻灯片：

1

pnpm slidev build slides/*.md

优点：依赖只安装一次、组件样式可复用、Git管理更干净。

缺点：配置文件共享，灵活性略低。

方案三：Slidev Workspace（进阶）

如果你有大量幻灯片需要管理，官方社区提供了专门的工具 slidev-workspace，提供统一的管理界面来浏览、搜索和运行所有演示文稿。

1
2

npm install -g slidev-workspace
slidev-workspace preview   # 启动管理界面

我的建议

你的情况推荐方案
偶尔做PPT（每月1-2次）多项目模式，用完可删
频繁做PPT，想省事单项目多幻灯片模式
需要团队协作多项目模式 + Git
幻灯片数量很多（10+）Slidev Workspace

另外有个小技巧：可以创建一个”模板项目”，每次需要新PPT时复制一份，这样既有独立项目的灵活性，又省去了重复配置的麻烦。

你平时做PPT的频率大概是多久一次？

pnpm命令管理项目的方式

pnpm create slidev,我使用这个命令安装的slidev，请给我列出管理这个项目的命令

通过 pnpm create slidev 创建项目后，核心的管理命令主要有四个：启动开发、构建网站、导出文件、格式化内容。我把它们整理成了下面的表格，方便你快速查阅和使用：

核心命令一览

命令作用常用场景
pnpm dev启动本地开发服务器，在浏览器中实时预览你的幻灯片。制作和修改 PPT 时，边写边看效果。
pnpm build将你的幻灯片打包成一个静态网站（SPA），用于部署到服务器上。PPT 定稿后，分享给不便安装工具的同事，或部署到公司内网。
pnpm export将幻灯片导出为 PDF、PPTX 或 PNG 文件。发送给客户、打印材料，或作为最终交付文件存档。
pnpm slidev format自动格式化你的 slides.md 源文件，让代码结构更清晰。当 Markdown 文件的布局或代码缩进变得混乱时，用来整理一下。

这些命令都已经在项目根目录下的 package.json 文件中配置好了。你只需要在项目文件夹中打开终端，直接运行 pnpm 后跟对应的命令即可。

常用进阶参数

除了基础命令，这些命令还支持一些非常有用的参数，可以满足更具体的需求。

  • pnpm dev -- --remote：启动服务后，会生成一个网络地址，允许局域网内的其他设备（如手机、平板）访问并控制你的幻灯片，非常适合在多个屏幕上预览。
  • pnpm dev -- --port 8080：指定开发服务器的端口号（默认是 3030），如果你的默认端口被占用，可以用这个命令换一个。
  • pnpm export -- --with-clicks：如果你的幻灯片里有点击动画（比如列表项一条条出现），加上这个参数后，会把每次点击后的状态都单独导出一页，在PDF中完整呈现你的演讲过程。
  • pnpm export -- --format pptx：直接导出为 PowerPoint 文件，方便需要编辑原始文件的同事。
  • pnpm build -- --base /my-slides/：如果你的静态网站不是部署在服务器的根目录，而是某个子路径下（如 https://your-site.com/my-slides/），就需要用这个参数来指定基础路径。

开发者提示

  • 关于 pnpm slidev：如果你想直接启动一个项目，或者在命令行中传递更多自定义参数，可以在上述命令后加上 --，然后再写 slidev 的参数。例如：pnpm slidev -- --port 8080。
  • 注意命令格式：传递参数时，必须在 pnpm 命令和 slidev 命令之间加上 --，例如 pnpm dev -- --remote，这会将后面的参数正确传递给 Slidev 工具。
  • 快捷键：在浏览器预览界面（pnpm dev 启动的页面）中，按 f 键可以全屏，按 o 键可以打开幻灯片总览模式，按 d 键可以切换深色模式，这些快捷键在演讲时非常实用。

我的建议：不同阶段的命令选择

根据你的工作流程，可以这样组合使用这些命令：

  1. 制作中：只使用 pnpm dev，专注于内容创作。
  2. 本地预览：使用 pnpm dev -- --remote，在手机或平板上预览效果，确保在不同设备上显示正常。
  3. 定稿分享：根据接收方的需求选择命令。如果是给开发者同事，可以发 dist 文件夹（pnpm build 生成）；如果是给非技术人员或用于打印，就导出 PDF（pnpm export）。
  4. 归档备份：将整个项目文件夹（特别是 slides.md 源文件）备份好，方便未来修改和复用。
Slidev, 入门指南
slidev ppt
本文由作者按照 CC BY 4.0 进行授权