在 Atom 上设置 p5.js答案

【问题标题】：Setting up p5.js on Atom在 Atom 上设置 p5.js
【发布时间】：2021-01-10 19:31:02
【问题描述】：

我是 p5.js 的新手。我想知道如何使用 atom live server 在 atom 中设置它。我想不出办法。YouTube 上的大多数教程都使用 p5.dom.js 文件不幸的是，他们网站上提供的完整 p5.js 包中没有。请帮忙。

【问题讨论】：

如果您使用的是现代版本的 p5.js，他们删除了 p5.dom.js 库并将其直接集成到 p5.js 本身中。因此，如果您运行createButton("Hello I'm a button")，它将创建一个<button> 元素，其中包含文本"Hello I'm a button"。 p5js.org/reference/#group-DOM

标签： javascript atom-editor p5.js

【解决方案1】：

当您在后台打开web editor 时，实际上隐藏了一个 index.html 文件。该文件引用 p5.js（在 p5 的早期版本中，它还链接到 p5dom）。

要使用您的草图复制实时服务器，请确保您有一个项目文件夹，其中包含链接到 p5.js 以及您的草图.js 的 index.html 文件。

Getting Started 教程在在您自己的计算机上使用编辑器设置 p5.js 部分中演示了一个示例。

Atom 中的实时服务器是原始的！要将它与 p5.js 项目一起使用，请转到文件 > 添加项目文件夹并选择保存 p5.js 项目的文件夹。例如，这应该至少包含您的 index.html、sketch.js 和 p5.js 库。并确保您的 index.html 的结构类似于上面的入门教程。现在它已打开，您可以转到 Packages > Atom Live Server > Start Server。它应该会启动一个浏览器窗口并让您预览。

请注意，如果您打开了多个项目，您想要预览的项目必须是左侧文件查看器中最顶部的项目。如果不是，请将您的项目文件夹拖到顶部。

【讨论】：