00:00:00>> 大家好,我是来自 Vercel 的 Pauline,在今天的视频中,
00:00:03我将向大家展示如何使用
00:00:05v0 的 Git 集成功能,
00:00:08将您的创意从原型转变为生产项目。
00:00:11在这个视频中,
00:00:12我们将构建一个博客,
00:00:14将其连接到 GitHub,
00:00:15利用分支功能安全地尝试新特性,
00:00:18然后将其正式部署到网络上。
00:00:21最后,您将掌握完整的完整工作流程。
00:00:25让我们开始吧。
00:00:27好了,我们现在进入了 v0。
00:00:30我将从构建一个简单的博客开始。
00:00:33我直接在聊天框里描述我的需求。
00:00:35我们要在这里创建一个
00:00:37现代风格的博客页面,包含
00:00:42页眉、推荐文章和近期文章网格。
00:00:53小提示,您也可以在这里更改模型。
00:00:57我们提供多种模型。
00:00:59有 Mini、Pro、Max,
00:01:01还有 Opus。
00:01:03您可以在聊天过程中随时切换。
00:01:07很好,我很喜欢。
00:01:09v0 已经为我生成了这个简洁的博客布局。
00:01:13让我们做一些调整,使其更具个性化。
00:01:17让我们把,
00:01:21噢,希望我没拼错,
00:01:23把页眉背景设为从蓝色到紫色的渐变。
00:01:32完美。现在我得到了一个满意的博客。
00:01:36但目前,这只存在于 v0 中。
00:01:40我需要将我的工作保存在更永久的地方。
00:01:43最终,我想把它上线部署,
00:01:45这就是 Git 集成发挥作用的地方。
00:01:48我们只需点击侧边栏,
00:01:52就能看到 GitHub 图标和 Git 连接选项。
00:01:56由于这是我第一次连接这个项目,
00:01:59v0 会要求我连接 GitHub 账号并为仓库命名。
00:02:04那么,我们现在进行连接。
00:02:06范围选择我的个人账号。
00:02:08虽然我有多个账号,
00:02:10但目前我只使用我的个人 Pauline 账号。
00:02:13我对这个仓库名称很满意,
00:02:15所以保持原样,直接
00:02:16点击创建仓库。
00:02:18就这样,v0 正在创建
00:02:21仓库并将我的所有代码推送到 GitHub。
00:02:24太棒了。现在,让我们看看 GitHub 上实际发生了什么。
00:02:29我们可以检查一下。
00:02:31看看 v0 生成的所有代码。
00:02:34结构非常规范,包含了所有需要的配置文件。
00:02:38组件都在那里,
00:02:40还有 app 目录,
00:02:41一切都井井有条,随时可以开始工作。
00:02:43您可能会想:“连接到 GitHub 到底有什么好处?”
00:02:48首先,我的代码得到了安全备份。
00:02:51如果出现任何问题,
00:02:53我都有完整的历史记录。
00:02:55其次,我现在可以更自由地进行实验,
00:02:57而不用担心破坏性的更改。
00:03:00稍后我们将在分支功能中看到这一点,
00:03:02第三,我有了通往生产环境的路径。
00:03:04我可以将这个博客实时部署。
00:03:06好了,让我们通过添加一个新功能来看看它的实际操作。
00:03:09假设我想添加一个“关于作者”板块,
00:03:14但我还没完全确定它应该长什么样。
00:03:17我不希望弄乱当前的版本。
00:03:19所以,这就是分支发挥作用的地方。
00:03:21分支就像是项目的一个并行版本,
00:03:24您可以在其中安全地进行尝试。
00:03:27好的。我们要做的就是复制这个分支。
00:03:31我们将这个分支命名为 author-bio。
00:03:36请注意上方,
00:03:38我现在处于 author-bio 分支上。
00:03:41我的 main 主分支仍然保持原样,没有被触动。
00:03:45现在我们可以在这里自由地尝试了。
00:03:48我们要添加那个作者简介。
00:03:50所以我们直接要求 v0 添加一个作者简介板块。
00:03:56太棒了。
00:03:59它已经添加了这个新的作者简介组件。
00:04:02现在让我们在预览界面快速刷新一下。
00:04:06我们应该能看到它添加的位置。
00:04:10瞧。这就是新增的“关于作者”板块。
00:04:13再次提醒大家,
00:04:15我们是在这个分支中进行的更改,
00:04:18即 author-bio 分支,
00:04:19这意味着 main 主分支
00:04:22完全没有受到任何影响。
00:04:24所以这个分支可以让我们随意尝试。
00:04:27如果我们想修改任何文本
00:04:29或样式,都可以在这里自由操作。
00:04:33实际上,看到这个效果,
00:04:35我觉得作者简介应该更紧凑一些。
00:04:38趁我还在这个分支上,我来调整一下,
00:04:40演示给大家看。
00:04:41让作者简介更紧凑一点。
00:04:46太棒了。
00:04:48你可以看到 v0 已经让作者板块变得更紧凑了,
00:04:52它通过整体减少内边距来实现。
00:04:56看起来好多了。
00:04:57我对此非常满意。
00:04:58现在我们可以开启一个 PR 并推送这些更改。
00:05:03看看这个工作流程是如何保护我的主分支的。
00:05:06我可以在这个实验分支中进行无数次迭代,
00:05:10而主分支在我也完全满意之前始终保持稳定。
00:05:13好了,我现在对作者简介很满意了。
00:05:16是时候把它合并到我的主分支中了。
00:05:18我会创建一个拉取请求(Pull Request)。
00:05:20拉取请求(即 PR)基本上就是请求
00:05:25将我的更改从 author-bio 分支
00:05:28合并(Pull)到 main 主分支。
00:05:30这是提议更改的正式方式。
00:05:32我们可以直接在这里开启一个 PR。
00:05:35然后点击这里查看 PR 本身。
00:05:44这会直接带我们跳转到 GitHub。
00:05:46如您所见,
00:05:47这里记录了我们在 v0 中提交的两次提交。
00:05:51分别是创建作者简介和使其更紧凑。
00:05:56如果我们点击“文件更改”(files changes),
00:05:58您可以查看 v0 修改的具体代码。
00:06:03在团队合作中,
00:06:04您的同事会在这里审查您的代码
00:06:07并留下意见。
00:06:08对于个人项目,
00:06:09这是您确保一切看起来都完美
00:06:11的最后检查。
00:06:13我对这些更改很满意。
00:06:14所以我要合并这个拉取请求。
00:06:17让我们回到 v0 这里。
00:06:20如您所见,我们可以直接合并 PR。
00:06:23我们就把它合并掉。
00:06:29如果回到 GitHub,
00:06:31您可以看到它已经显示为已合并。
00:06:34现在,这个功能已经正式成为了我们主代码库的一部分。
00:06:38现在一切都上线了。
00:06:39我们还可以进入这里的设置,
00:06:42查看 Vercel 项目并点击“在 Vercel 上查看”。
00:06:46您可以看到,我们的部署已经完成了。
00:06:51如果我们点击这里的域名,就在这儿。
00:06:55我的博客已经在互联网上实时运行了。
00:06:57您可以看到带有渐变效果的页眉,
00:07:00以及博客文章。
00:07:01当我向下滚动,就是我们的作者简介。
00:07:06基本上,我在 v0 中构建的所有内容
00:07:08都通过 Git 安全地合并,
00:07:10现在已经部署并可以被全世界访问。
00:07:13这正是专业开发团队
00:07:14每天都在使用的工作流程。
00:07:17所以,您在 v0 中开发,通过 Git 管理代码,
00:07:20然后通过 Vercel 部署,
00:07:22这是一个完整的生产级工作流程。
00:07:25希望这能帮助您
00:07:27更自信地使用 v0 的 Git 集成功能。
00:07:30请亲自尝试一下这个流程。
00:07:32从一些小改动开始,创建一个分支,
00:07:34进行实验并部署。
00:07:36如果您有任何疑问,
00:07:38欢迎在我们的社区空间 community.vercel.com 找到我们。
00:07:41非常感谢您的收看。