html移植到vue_使用JavaScript和Vue.js生成令人敬畏的幻灯片

我们看一下以编程方式创建幻灯片的两个框架，Reveal.js和Eagle.js，看看它们是如何叠加的。

我最近使用了几个JS框架来制作幻灯片和最终的程序化视频。以下是我对两个框架 Reveal.js和Eagle.js的反馈。

介绍

正如我之前在Faveeo写的那样，我们正在努力从策划文章中制作原创内容。团队的一个想法是从书面文章中制作视频，以最大限度地提高读者的参与度，并生成新鲜，易于理解的材料。

我不得不探索以编程方式制作视频的解决方案和我想出的一个解决方案，即构建有吸引力的幻灯片。幻灯片必须具有足够的吸引力，以吸引读者并给他们留下他们正在观看视频的印象。

通过团队，我们探索了几种解决方案：

• 使用JS生成幻灯片并记录它们。
• 使用ffmpeg 和以编程方式构建视频 imagemagick。
• 探索可用的SaaS平台来编写我们的视频。
• 生成Adobe Premiere兼容格式。

长话短说，除了第一个解决方案外，所有解决方案都成了噩梦。

我一直在使用两个框架来构建我的幻灯片，我保留了Eagle.js

Reveal.js

Reveal.js是一个很酷的框架，允许用户使用HTML / CSS和一些JavaScript来构建自己的幻灯片。为了帮助初学者，它在https://slides.com/上提供了一个在线编辑器。

这篇文章不是教程，因此，这是我对我的用例的反馈。

好吧，Reveal.js非常受欢迎，很容易在网上找到很多例子。

WTF：我们如何开始？

我第一次使用Reveal.js时有这种反应，直到我明白我必须克隆一个git项目来创建我的第一个模板。我遇到的第二个问题是找不到代码，直到我发现单个HTML页面包含幻灯片放映的所有代码。

丰富的功能和出色的文档

Reveal.js有一系列令人印象深刻的功能，自动播放，录音，音频等等，它对大多数人来说都是完美的。

文档也很棒，你会发现很多例子。

解决方案的缺点

Reveal.js有一些缺点：

• 它是纯粹的，香草的JS，虽然我能够使它与Vue.js友好，但它一直非常hacky。
• 当幻灯片出现时，我无法触发文本动画。
• 我必须在生成新幻灯片后重新启动组件，因为我无法控制Reveal.js生命周期。

设计缺陷

Reveal.js带有一个相当聪明的系统，可以正确定位幻灯片项目并计算它们的大小。

但是，如果你想为你的幻灯片制作一个绝对的设计，那就是一个纯粹的噩梦，即底部的元素，左上角的图片等。

我一直在努力获得我的第一个视频原型，其中包含Reveal.js附带的CSS选项以及我们自定义模板的方式。

Eagle.js

Eagle.js是一个由Vue.js提供支持的最新JS框架，因此允许开发人员将幻灯片写为Vue组件。

我一直对这个框架感兴趣，因为它允许我的幻灯片与Vue的原生集成以及可能更容易的自动生成。

以下是我对Eagle.js的反馈。

Vue

我一直是Vue.js的大力支持者，并且使用基于它的库让事情变得非常简单。我花了几个小时将Reveal.js幻灯片移植到Eagle.js。

文档很差

是的，文档很差，即使Zulko提供了几个很好的例子。但是所有逻辑和脏东西都隐藏在代码中。好消息？只有两个小代码文件。

没有特色

这些组件事实上 是缺少的，但是缺少一大堆功能，例如自动播放。

CSS

框架附带一个主题，但一切都可以轻松覆盖。

易于扩展

我扩展了框架，允许我进行一些调整和设计选择(https://github.com/faveeo/eagle.js)。

结论

我保留了Eagle.js。虽然该框架具有较少的功能和较差的文档，但我们可以轻松扩展设计或功能，这使我能够创建更好的幻灯片和视频。