Slidev官方版

Slidev简介

Slidev提供PPT辅助制作功能，可以帮助你在编辑PPT时获得更多的编辑工具和显示工具。您可以通过该软件演示您的文档，直接在主程序左下角显示演示工具，支持切换上一个动画或幻灯片，切换到幻灯片概述，切换到黑暗模式，切换相机视图，进入语音录制模式，使用集成编辑器设计幻灯片图像、图表和图标。Slidev通过编程帮助你编辑动画资源。设计PPT时，可以使用代码生成图像和动画内容。通过指定的语法内容，可以给PPT元素添加动画、过渡和运动，可以帮助用户编辑PPT动画。

Slidev开发背景

在使用PowerPoint/Keynote/Google幻灯片等应用程序时，我总是发现自己在样式和布局幻灯片上花费了太多时间。每当我需要分享代码片段时，我还需要使用其他工具一次又一次地生成高亮显示的代码作为图像。

那么，作为一个前端开发人员，为什么不采用一种很适合我的方式来解决呢？

为什么Slidev

有许多通用的、通用的、所见即所得的幻灯片制作工具，如微软的PowerPoint或苹果的Keynote。它们在制作带有动画、图表和许多其他漂亮的幻灯片方面相当有效，而且非常直观，易于学习。那么，为什么还要费心制作Slidev？

Slidev旨在为开发人员提供灵活性和交互性，并通过使用他们已经熟悉的工具和技术，使他们的演示更加有趣、富有表现力和吸引力。

使用所见即所得编辑器时，人们很容易受到样式选项的干扰。Slidev通过分离内容和视觉效果来弥补这一点。这使您能够一次专注于一件事，同时，您可以在社区中重用主题。Slidev并不寻求完全取代其他幻灯片制作工具。相反，它侧重于满足开发人员社区的需求。

Slidev软件功能

1.支持Markdown语法

Slidev使用扩展的Markdown格式以纯文本文件存储和组织您的幻灯片。这可以让你专注于制作内容。而且，因为内容和风格是分开的，所以也更容易在不同的主题之间切换。

2.可定制的主题

Slidev的主题可以通过npm包共享和安装。您只需要使用一行配置就可以应用它们。

3.对开发者友好

Slidev为开发人员提供一流的代码片段支持。它同时支持Psm和Shiki，在像素级得到完美的语法高亮，可以随时修改代码。通过内置的Monaco编辑器，还可以让你在演示中当场编码/演示，支持自动补全、类型悬停甚至TypeScpt类型。

4.快的

Slidev感谢Vite、Vue 3和Windi CSS，为你带来最精彩的创作体验。您所做的每一项更改都会立即反映在您的幻灯片中。

5.互动和直观表达

您可以编写自定义的Vue组件，并直接在您的MarkDown文件中使用它们。您也可以在演示中与他们互动，以更深入、更直观的方式表达您的想法。

6.支持录制

Slidev提供内置录制和相机视图。您可以与相机视图共享演示文稿，或者分别录制并保存屏幕和相机。所有这些都是内置的，不需要额外的工具。

7.可移植的

只需一个命令，您就可以将幻灯片导出为PDF或PNG，甚至是托管的单页应用程序(SPA)，并在任何地方共享它们。

8.可配置的

因为Slidev是基于Web技术的，所以任何可以在Web应用程序中完成的事情也可以由Slidev来完成。例如，WebGL、API请求、iframes，甚至实时共享。这完全取决于你的想象力！

Slidev软件特色

使用你最喜欢的编辑器和工作流程。

开发人员友好的内置语法突出显示、实时编码等

主题-主题可以与npm包共享和使用。

时尚-Windi CSS按需实用程序，易于使用的嵌入式样式表

交互式无缝嵌入式虚拟组件

演示者模式-使用另一个窗口，甚至使用您的手机来控制幻灯片。

LaTeX-内置LaTeX数学方程支持

图表-创建带有文本描述的图表。

图标-直接从任何图标集访问图标。

编辑器集成编辑器或VS代码扩展

录制-内置录制和相机视图

可移植-导出为PDF、巴布亚新几内亚甚至托管SPA

被维特快速重装

intrusable-使用Vite插件、Vue组件或任何npm包。

开始被使用

理解它的最好方法是试一试，只有一个命令:

npm init slidev@latest

Slidev科技栈

Vite-速度极快的前端工具

vu3赋能降价——专注于内容，并在需要时拥有HTML和Vue组件的功能。

I CSS-按需实用-第一个CSS框架，可以轻松设置幻灯片的风格。

Psm，Shiki，摩纳哥编辑-支持实时编码功能的一流代码片段

内置录音和摄像机视图

Vue家族-，@vueuse/core，@vueuse/head，@vueuse/motion等。

图标集.

KaTeX -LaTeX数学渲染。

美人鱼-文字地图。

Slidev教程

语音记录

Slidev内置语音录制和摄像头视图。你可以用它们来轻松记录你的演讲。

#摄像机视图

单击导航面板上的相机按钮，您的相机视图将显示在演示文稿中。您可以拖动它，并使用右下角的手柄来调整它的大小。并且大小和位置会持久存储在localStorage中，这样反复刷新后显示也能保持一致，不用担心位置和大小的丢失。

#记录

单击导航面板上的录制按钮，将弹出一个对话框。在此对话框中，您可以选择将相机视图嵌入到幻灯片中进行录制，也可以将它们分成两个文件。

这个功能的实现得益于RecordRTC和WebRTC API。

配置Vue

环境:客户端

Slidev基于Vue 3渲染应用。您可以扩展应用程序，添加自定义插件或自定义配置等。

创建。/setup/main.ts文件，包含以下内容:

这个也可以作为你的Slidev应用的主入口，在应用启动前做一些初始化。

配置KaTeX

环境:节点

创建一个包含以下内容的/setup/katex.ts文件:

配置时，您可以提供一些定制的KaTex选项。

配置美人鱼

环境:客户端

创建一个包含以下内容的/setup/美人鱼. ts文件:

动画

#单击动画

# v-点击

要向元素添加单击动画，可以使用v-click命令或组件。

v后

v-after的用法与v-click类似，但v-after使元素在最后一次v-click触发后可见。

当你点击“下一步”按钮，你好和世界将同时出现。

# v-点击

v-click仅作为组件提供。它可以快速地将其所有子元素添加到v-click指令中。它在列表中特别有用。

每次单击“下一步”按钮，元素都会一个接一个地出现。

#自定义点击次数

默认情况下，Slidev计算在移动到下一张幻灯片之前要走多少步。您可以在fntmatter选项中设置点击以覆盖此设置:

分类

通过传递点击索引，您可以自定义显示顺序。

元素跃迁

当您将v-click指令应用于元素时，它会向元素添加一个名为slidev-vclick-target的类。当元素隐藏时，会添加slidev-vclick-hidden类。示例:

默认情况下，半透明过渡效果应用于这些类:

您可以在自定义样式表中自定义过渡效果，以覆盖默认配置。

例如，您可以通过以下方式实现缩放过渡效果:

运动

Slidev内置了@vueuse/motion。您可以将v-motion命令应用于任何元素，以赋予它们运动效果。示例:

Text Slidev将从其初始位置-80px移动到其原始位置。

注意:Slidev将预加载下一张幻灯片以提高性能，这意味着动画可能会在您导航到该页面之前开始。为了使其正常工作，您可以禁用指定幻灯片的预加载。

—

预载:假

—

或者使用v-if控制元素的生命周期来获得更细粒度的组件控制。