环境搭建与项目初始化

环境要求

Slidev 基于 Node.js 生态，安装前确认本机环境：

依赖	要求	说明
Node.js	18.0 及以上	Slidev 依赖 Vite 5，要求 Node 18+
包管理器	pnpm / npm / yarn 任选	官方推荐 pnpm，依赖安装更快、更省空间
浏览器	Chrome / Edge / Firefox 等	预览与导出均依赖 Chromium 内核浏览器
编辑器	VSCode（推荐）	官方扩展提供预览与语法提示

检查版本：

node -v        # 查看 Node 版本，需 >= 18
pnpm -v        # 查看 pnpm 版本（未安装则先全局安装）

未安装 pnpm 时通过 npm 安装：

npm install -g pnpm

初始化项目

使用官方脚手架创建新项目：

pnpm create slidev

交互式引导会询问两个问题：

问题	建议
项目名称	输入目录名，如 my-deck
是否使用精简模板	选择完整模板（默认），包含示例与提示

也可以跳过交互直接指定目录：

pnpm create slidev my-deck
cd my-deck

启动开发服务器：

pnpm dev

浏览器自动（或手动）打开 http://localhost:3030，看到示例幻灯片即初始化成功。

项目结构

初始化后的目录结构：

my-deck/
├── .vscode/                # VSCode 配置（扩展推荐）
├── public/                 # 静态资源目录（图片等，按根路径引用）
├── components/             # 自定义 Vue 组件目录（可选）
├── layouts/                # 自定义布局目录（可选）
├── styles/                 # 全局样式（可选）
├── .gitignore
├── package.json            # 项目配置与依赖
├── vite.config.ts          # Vite 扩展配置（可选）
└── slides.md               # 演示文稿入口文件（核心）

slides.md 入口

slides.md 是整个演示文稿的唯一入口：所有幻灯片内容、Frontmatter 配置都写在这个文件中。Slidev 只要求存在此文件，其余目录（components/、layouts/ 等）按需创建。

---
theme: seriph
---

# 第一页

单文件模式（全局安装）

不需要为每次演示都建项目时，可以全局安装 Slidev CLI，直接用命令打开任意 slides.md：

npm install -g @slidev/cli

然后在一个包含 slides.md 的目录下执行：

slidev            # 打开当前目录的 slides.md
slidev slides.md  # 打开指定文件

这种模式适合快速演示或临时分享：单文件 + 一条命令即可跑起一份幻灯片，项目模式则适合需要自定义组件、主题、插件的正式项目。

VSCode 扩展安装

官方提供 VSCode 扩展，安装后获得：

• 实时预览：编辑 slides.md 时侧边栏预览幻灯片效果
• 语法高亮：Frontmatter、--- 分隔符、代码块高亮
• 快速命令：命令面板中直接启动/停止预览

安装方式（任选其一）：

• 打开 VSCode 扩展面板，搜索 Slidev（发布者 slidev），点击安装。
• 在 VSCode 中执行命令面板（Ctrl+Shift+P），输入 slidev 查看可用命令。

扩展对单文件模式与项目模式均生效，是编写 Slidev 文稿时最顺手的辅助工具。

初始化验证清单

步骤	命令/操作	预期结果
检查 Node 版本	node -v	输出 18.x 及以上
创建项目	pnpm create slidev my-deck	生成目录与 slides.md
启动开发服务器	pnpm dev	浏览器打开 localhost:3030 显示示例
安装 VSCode 扩展	扩展面板搜索 Slidev	打开 slides.md 显示预览窗格