开源项目：Slidev 面向开发者的演示文稿

1、简述

Slidev 是一个由 Vue 核心团队成员 Anthony Fu 开发的开源演示文稿工具，专为开发者设计。

👉 一句话概括：

Slidev = Markdown + Vue + Vite 的 PPT 工具

GitHub 地址（开源）： https://github.com/slidevjs/slidev

2、为什么选择 Slidev？

2.1 传统 PPT 的痛点

2.2 Slidev 的优势

👉 非常适合：

🔥 技术分享

🔥 架构讲解

🔥 开源项目介绍

🔥 内部技术培训

2.3 Slidev 核心架构原理

Markdown (.md)
    ↓
Slidev Parser
    ↓
Vue SFC
    ↓
Vite Dev Server
    ↓
Browser

关键技术栈：

🔥 Vue 3

🔥 Vite

🔥 Markdown-it

🔥 UnoCSS

🔥 Shiki（代码高亮）

3、安装 Slidev

方式一：使用 npm（推荐）

npm init slidev

或指定项目名：

npm init slidev slidev-demo

方式二：全局安装

npm install -g @slidev/cli
slidev

方式三：pnpm / yarn

pnpm create slidev

4、实践样例

1️⃣ 项目结构说明

slidev-demo/
├── slides.md        # 核心文件
├── package.json
├── components/      # Vue 组件
├── public/          # 静态资源
└── themes/          # 自定义主题

2️⃣ slides.md 最小示例

---
theme: default
title: Slidev 入门
---

# Slidev 入门演示

作者：Your Name

---

## 什么是 Slidev？

- Markdown 写 PPT
- Vue 驱动
- 面向开发者

---

## 示例代码

```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello Slidev");
    }
}

3️⃣ 启动项目

npm run dev

访问：http://localhost:3030

5、实践技巧

1️⃣ 分页方式

---
# 第一页
---

# 第二页

2️⃣ 布局（Layout）

---
layout: center
---

居中内容

内置布局：

🔥 default

🔥 center

🔥 cover

🔥 two-cols

🔥 image-right

3️⃣ 代码逐行高亮（演讲神器）

```js {1|2|3}
const a = 1
const b = 2
console.log(a + b)

4️⃣ 使用 Vue 组件

<MyCounter />

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">
    点击次数：{{ count }}
  </button>
</template>

6、导出为 PDF / PPT

导出 PDF

npm run export

或：

slidev export

导出 PPTX（实验性）

slidev export --format pptx

7、总结

Slidev 并不是要取代 PowerPoint，而是：

为开发者，重新定义演示文稿的生产方式

如果你习惯：

📘 技术博客配套演示

🧠 架构设计说明

🧪 Demo 驱动分享

🏗️ 内部技术培训

🚀 开源项目 Roadmap

👉 Slidev 是目前最优解之一