👀 概览

实验室里很多同学需要构建和测试用户界面。如果你希望进行前端开发，并希望实现实时预览和协作开发，又不想在本地搭建开发环境，可以考虑使用 CodeSandbox，这是一个功能强大的基于浏览器的开发工具。

不过，CodeSandbox 主要用于开发和原型设计。如果你希望更好地进行版本管理，并将项目部署为可共享的网页链接供他人访问，就需要将其与 GitHub 连接，并通过 Vercel 进行部署。

本指南总结了我最近将代码从 CodeSandbox 迁移至正式部署的过程，帮助你了解从开发到上线的常见工作流（CodeSandbox → GitHub → Vercel），主要包括：

• 如何使用 CodeSandbox 进行开发与预览？
• 如何将代码推送到 GitHub？
• 如何通过 Vercel 部署网站？

<aside> 💡

在开始之前，请确保你已具备以下基础：

• 基本的前端开发知识（如 React、HTML/CSS、JavaScript）
• 熟悉使用 Git 和 GitHub </aside>

1. 在CodeSandbox中进行开发

简介

CodeSandbox 是一个在线集成开发环境（IDE），用于快速前端开发，支持即时预览和协作编辑。

（右侧为预览界面，非常方便）：