Slidev：開發者的 Markdown 簡報框架
日期:
標籤:
簡報工具Vue3開發效率
來源: @yunwei37 (云微)日期: 2026-02-17 標籤:
開發工具簡報MarkdownVueVite
簡介
Slidev 是一個專為開發者設計的 Markdown 簡報框架，特別適合結合 AI 進行 vibe coding slides。
官方網站：sli.dev
核心特性
內容創作
- 📝 基於 Markdown：專注於內容本身，使用你喜愛的編輯器
- 🧑💻 開發者友善：內建程式碼高亮、即時編碼等功能
- 📰 圖表支援：透過 Mermaid 使用文字描述創建圖表
- 🧮 LaTeX 支援：內建 LaTeX 數學公式渲染
- 🌟 圖示支援：直接存取任何圖示集的圖示
樣式與主題
- 🎨 主題化：主題可透過 npm 套件分享與使用
- 🌈 樣式化：透過 UnoCSS 提供隨需工具類別
- 🤹 互動性：無縫嵌入 Vue 元件
簡報功能
- 🎙 簡報者模式：使用另一個視窗或手機控制投影片
- 🎨 繪圖功能：在投影片上繪圖與註解
- 🎥 錄製功能：內建錄製與相機視圖
- 📤 可攜性：匯出為 PDF、PNG 或 PPTX 格式
開發體驗
- 💻 編輯器整合：整合編輯器或 VSCode 擴充功能
- ⚡️ 快速：由 Vite 驅動的即時重新載入
- 🛠 可擴充：使用 Vite 外掛、Vue 元件或任何 npm 套件
快速開始
線上試用
訪問 sli.dev/new 立即開始
本地初始化專案
環境需求：Node.js >= 18
bash
npm init slidev技術棧
- Vite：極快的前端工具鏈
- Vue 3：驅動 Markdown，可隨時使用 HTML 和 Vue 元件
- UnoCSS：隨需的工具類別優先 CSS 引擎
- Shiki、Monaco Editor：一流的程式碼片段支援與即時編碼能力
- RecordRTC：內建錄製與相機視圖
- VueUse 系列：@vueuse/core、@vueuse/motion 等
- Iconify：圖示集合
- Drauu：繪圖與註解支援
- KaTeX：LaTeX 數學渲染
- Mermaid：文字圖表
文件資源
- 英文文件：官方文件
- 中文文檔：繁體中文支援
- 其他語言：法文、西班牙文、俄文、葡萄牙文（巴西）
Discord 社群：chat.sli.dev
範例參考
完整範例可查看專案的 demo 資料夾。
授權
MIT License © 2021 Anthony Fu