1. 前言

今天公司的内部分享，一个同事的PPT惊艳到了我，感觉突然发现了新世界的大门(怪我太落后，托大家后腿了🤣)，原来PPT也能这么玩儿，分享结束后找到他了解了一下使用到的工具，本篇文章呢，用于记录一下自己的学习过程，同时也推荐一下大家去使用吧。
在我们工作中其实很多时候会用到PPT。比如在转正答辩、职级晋升、年终总结等等。但是想要做出一个好看的PPT却不是那么容易的。作为一个Coder，如果能够使用我们平时工作中所使用到的技术来搞定一个PPT的制作，那一定是很酷的。下面就让我们一起了解Slidev的使用吧！

2. 介绍

提到Slidev，那不得不说一下它的作者，开源社区鼎鼎大名的托尼老师Anthony Fu，除此之外，他还是Vue，Vite，Nuxt的核心成员，vitest，vueuse，unocss等项目的作者。总之，两个字描述：🐮🍺。
Slidev旨在让开发者专注于在Markdown中编写内容，同时拥有支持HTML和Vue组件的能力。下面先简单看一下Slidev的功能特点：

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

3. 基础使用

具体的使用方式，请大家直接参考官方文档，这里就不再进行赘述了。地址如下： Slidev官方文档

安装

Slidev 需要 Node.js 的版本  >=14.0.0

如果你想快速开始，建议直接使用官方的初始模版。 使用NPM或Yarn：

npm init slidev@latest

yarn create slidev

我们也可以直接全局安装，这样以后在任何地方都可以直接使用slidev

npm i -g @slidev/cli

yarn global add @slidev/cli

4. 效果演示

特别需要关注的几个点，Slidev内置了Windi CSS,也就是我们所说的原子化 CSS中的一种。我们完全可以根据自己需求编写自己所喜爱的样式。而不再局限于传统的ppt编写工具的限制。

同时也提供了对Vue组件的支持能力，我们可以直接使用Vue来编写我们的PPT。上图中，根目录下components文件夹就是用于放置我们的全局组件，我们编写完成后即可在slides.md中直接使用。特别是针对于一个Vuer来说，完全没有上手成本。这一种实现方式也完全打破了传统的PPT制作方式，让我们可以使用我们所熟悉的方式来完成这件事。

5. 结语

整体来说一个非常有意思的开源项目，推荐大家在未来的工作和生活中，可以尝试去玩儿一玩。另外，在这里也安利一下托尼老师的另一个开源项目vueuse，可以帮助我们在工作中去提效。好了，水文一篇，搞定🤝。就说到这里，再不睡我要猝死了🌧。各位，晚安！