如何使用 CodeSandbox - 初学者指南

一年多前，当我正在进行 freeCodeCamp前端开发库认证时，我开始使用CodeSandbox 。

这是一个非常有用的工具，您可以用它构建和共享您的 Web 开发项目。

在本指南中，我将带您了解此在线代码编辑器背后的所有免费功能。

CodeSandbox 模板

您可以通过访问CodeSandbox 网站并转到登录页面来创建一个免费帐户。

您可以选择使用您的 GitHub 或 Google 帐户登录。

登录后，您将被引导至主页。

有两个地方可以创建新的沙箱。

第一个位置位于右上角。点击蓝色的“创建沙盒”按钮。

第二个位置位于“最近使用的模板”部分下。

当您单击创建新沙箱时，您应该会看到一个欢迎菜单。

如果您单击左侧的“创建沙盒”选项，那么您将看到可用于开始项目的模板列表。

以下是一些可供您使用的模板的列表。

• 反应
• 静态 HTML 和 CSS
• 原始 JavaScript
• Vue
• 角度
• TypeScript
• 苗条
• 余烬
• 盖茨比

如果您想探索更多模板，请单击左侧的“探索模板”选项。

让我们看一下 React 模板并学习如何使用编辑器。

如何使用 CodeSandbox 编辑器

编辑器屏幕将会是这样的。

CodeSandbox 会为您的项目提供一个默认名称，该名称通常由随机字符组成。您可以在编辑器顶部重命名项目。

沙盒信息部分是什么？

在编辑器的左侧，您将看到沙盒信息的选项。

您可以在此处添加项目描述。

您还会注意到一个冻结模板的选项。

如果启用了冻结选项，则会阻止您对模板进行任何更改。您可以在文档中了解有关此选项的更多信息。

默认情况下，所有 CodeSandbox 项目都是公开的。如果您想要拥有私人项目，则需要订阅付费专业版。

您还可以选择创建自己的自定义模板。点击“沙盒信息”部分中的“另存为模板”选项。

如果您想删除沙盒，请点击底部的删除选项。

Explorer 部分是什么？

在编辑器的左侧，您将看到一个名为 Explorer 的选项。

顶部部分包含项目的所有文件。

下一部分是添加其他依赖项的地方。您可以使用搜索功能从 npm 注册表中查找任何包。

如果您需要添加任何 cdn 链接，那么您可以将其添加到外部资源部分。

CodeSandbox 附带了所有可添加到项目中的 Google 字体列表。该列表也位于外部资源部分。

配置文件有哪些？

在编辑器的左侧，您将看到一个名为“配置文件”的选项。

这是编辑 package.json 文件或任何其他配置文件的地方。

GitHub 部分是什么？

在编辑器的左侧，您将看到一个名为 GitHub 的选项。

在这里您可以连接您的 GitHub 帐户并为您的项目推送提交。

什么是部署部分？

在编辑器的左侧，您将看到一个名为“部署”的选项。

CodeSandbox 有一个选项可供您使用 Vercel、Netlify 或 GitHub Pages 从编辑器部署您的项目。

什么是 Live 选项？

在编辑器的左侧，您将看到一个名为 Live 的选项。

这是一个选项，你可以在这里进行实时编码。任何有链接的人都可以参与这些部分。

您可以在此处找到链接。

什么是共享选项？

在项目编辑器的右上角，您将看到一个蓝色的共享按钮。

如果您单击“共享”按钮，那么您可以邀请其他人编辑您的项目。

如果您单击嵌入选项，您可以将沙盒嵌入到您的博客文章中。

如何在新浏览器窗口中打开您的项目？

在右上角，您可以选择在新浏览器窗口中打开您的项目。

以上就是 CodeSandbox 的完整使用介绍。我鼓励大家尝试不同的功能，并开始构建自己的项目。

编码愉快！