dev-slides

开发者幻灯片技能

概述

本技能支持使用 Slidev（一个基于 Vue 的演示框架）创建面向开发者的演示文稿。您可以用 Markdown 编写幻灯片，并嵌入实时代码演示、图表和组件。

使用方法

1. 描述您的技术演示需求
2. 我将生成符合语法的 Slidev Markdown
3. 包含代码块、图表和 Vue 组件

示例提示：

• "创建一个 Vue.js 工作坊演示文稿"
• "制作带实时代码执行的幻灯片"
• "制作带图表的技术演讲"
• "创建开发者入职培训幻灯片"

领域知识

Slidev 基础

---
theme: default
title: My Presentation
---

# 欢迎

这是第一张幻灯片

---

# 第二张幻灯片

此处为内容

幻灯片分隔符

---   # 新水平幻灯片

---   # 另一张幻灯片
layout: center
---

# 居中内容

布局

---
layout: cover
---
# 标题幻灯片

---
layout: intro
---
# 介绍

---
layout: center
---
# 居中

---
layout: two-cols
---
# 左侧
::right::
# 右侧

---
layout: image-right
image: ./image.png
---
# 带图片的内容

代码块

# 代码示例

\`\`\`ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = \`Hello, \${name}!\`
console.log(greeting)
// 输出：Hello, Slidev!
\`\`\`

<!-- 逐行高亮 -->

Monaco 编辑器（实时代码）

\`\`\`ts {monaco}
// 可编辑代码块
function add(a: number, b: number) {
  return a + b
}
\`\`\`

\`\`\`ts {monaco-run}
// 可运行代码
console.log('Hello from Slidev!')
\`\`\`

图表（Mermaid）

\`\`\`mermaid
graph LR
  A[开始] --> B{决策}
  B -->|是| C[操作 1]
  B -->|否| D[操作 2]
\`\`\`

\`\`\`mermaid
sequenceDiagram
  客户端->>服务器: 请求
  服务器-->>客户端: 响应
\`\`\`

Vue 组件

<Counter :count="10" />

<Tweet id="1390115482657726468" />

<!-- 自定义组件 -->
<MyComponent v-click />

动画

<v-click>

点击时显示此内容

</v-click>

<v-clicks>

- 项目 1
- 项目 2
- 项目 3

</v-clicks>

<!-- 或使用 v-click 指令 -->
<div v-click>动画内容</div>

Frontmatter

---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
  persist: false
css: unocss
---

示例

示例：API 工作坊

---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
---

# REST API 工作坊

使用 Node.js 构建现代 API

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer">
    按空格键进入下一页 <carbon:arrow-right />
  </span>
</div>

---
layout: two-cols
---

# 我们将涵盖的内容

<v-clicks>

- RESTful 原则
- Express.js 基础
- 身份验证
- 错误处理
- 测试

</v-clicks>

::right::

\`\`\`ts
// 预览
const app = express()
app.get('/api/users', getUsers)
app.listen(3000)
\`\`\`

---

# 实时演示

\`\`\`ts {monaco-run}
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

console.log(JSON.stringify(users, null, 2))
\`\`\`

---
layout: center
---

# 有问题吗？

[GitHub](https://github.com) · [文档](https://docs.example.com)

安装

npm init slidev@latest

资源

• Slidev 文档
• GitHub
• 主题