开始使用

2023-12-11 23:26| 来源: 网络整理| 查看: 265

# 开始使用# 总览

Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。

它使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 —— 具有无限的可能性。

你可以在为什么选 Slidev 部分了解更多关于本项目的设计初衷。

# 功能📝 Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件🧑‍💻 开发者友好 —— 内置代码高亮、实时编码等功能🎨 可定制主题 —— 以 npm 包的形式共享、使用主题🌈 灵活样式 —— 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表🤹 可交互 —— 无缝嵌入 Vue 组件🎙 演讲者模式 —— 可以使用另一个窗口，甚至是你的手机来控制幻灯片🎨 绘图 - 在你的幻灯片上进行绘图和批注🧮 LaTeX 支持 —— 内置了对 LaTeX 数学公示的支持📰 图表支持 —— 使用文本描述语言创建图表🌟 图标 —— 能够直接从任意图标库中获取图标💻 编辑器 —— 集成的编辑器，或者使用 VS Code 扩展🎥 演讲录制 —— 内置录制功能和摄像头视图📤 跨平台 —— 能够导出 PDF、PNG 文件，甚至是一个可以托管的单页应用⚡️ 快速 —— 基于 Vite 的即时重载🛠 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包# 技术栈

Slidev 使用了如下的工具和技术：

Vite —— 一款极速的前端工具基于 Vue 3 的 Markdown —— 专注内容的同时，具备 HTML 和 Vue 组件的能力Windi CSS —— 按需、实用类优先的 CSS 框架，轻松定制你的幻灯片样式Prism, Shiki, Monaco Editor —— 具有实时编码能力的一流代码片段支持RecordRTC —— 内置录制功能和摄像头视图VueUse 家族 —— @vueuse/core、@vueuse/head、@vueuse/motion 等Iconify —— 图标库集合Drauu - 支持绘图和批注KaTeX —— LaTeX 数学渲染Mermaid —— 文本描述语言创建图表# 搭建你的第一个演讲稿# 在线试用

sli.dev/new

# 本地创建

使用 NPM：

$ npm init slidev

使用 Yarn：

$ yarn create slidev

根据提示开始创建你的幻灯片吧！想要了解更多关于 Markdown 的语法，请阅读语法指南。

# 命令行界面

在安装了 Slidev 的项目里，你可以在你的 npm scripts 里使用 slidev 命令。

{ "scripts": { "dev": "slidev", // 启动 dev server "build": "slidev build", // 构建生产环境的单页面应用 "export": "slidev export" // 将幻灯片导出为 pdf 格式 } }

或者，你也可以使用 npx

$ npx slidev

执行 slidev --help 命令获取更多选项的详细信息。

# Markdown 语法

Slidev 会读取位于项目根目录的 slides.md 文件，并将其转换为幻灯片。每当你修改 Markdown 文件，幻灯片的内容都会立刻随之更新。例如：

# Slidev Hello World --- # 第 2 页直接使用代码块，能够实现代码高亮 //```ts console.log('Hello, World!') //``` --- # 第 3 页

请阅读语法指南获取更多关于 Slidev Markdown 语法的内容。

【本文地址】

开始使用

开始使用

今日新闻

推荐新闻