注册
v0 注册不要钱，不要信用卡。打开 v0.app，用以下任一方式登录：
- GitHub 账号（推荐，后面 Git 集成方便）
- Google 账号
- 邮箱
- 已有的 Vercel 账号
登录后自动获得每月 $5 免费额度，够跑完这个教程。
注册流程长什么样
点击 "Continue with GitHub" 后，浏览器跳转到 GitHub OAuth 授权页，v0 只申请读取账号基本信息和邮箱，不会要求 repo 写权限（那是后面 Git 集成才需要的）。点 "Authorize" 后秒跳回 v0 主界面，没有额外表单。
首次进入会看到空白对话框和几张示例卡片——"Build a SaaS dashboard"、"Create a landing page"，点一下直接开跑，或者清空自己输入。左侧侧边栏是历史对话列表，右上角实时显示剩余 credits 余额。v0 账号就是 Vercel 账号，两边共用一套身份，不用分别管理。
界面长什么样
v0 的界面是典型的 AI 对话 + 实时预览布局：
| 区域 | 功能 |
|---|---|
| 左侧聊天区 | 输入描述、迭代需求 |
| 右侧 Preview 标签 | 实时预览生成的应用 |
| 右侧 Code 标签 | VS Code 风格编辑器，逐文件查看代码 |
| 顶部栏 | 项目名称、Deploy 按钮、Git 面板 |
| 侧边栏 | 环境变量（Vars）、模板、MCP 集成 |
创建第一个项目
点击聊天区的 "+" 或直接输入描述。试试这个：
创建一个个人作品集网站，包含：
- 顶部导航栏（首页、项目、关于我、联系方式）
- Hero 区域带我的名字和一句话介绍
- 项目卡片网格，每个卡片有标题、描述、截图、链接
- 底部联系表单
- 暗色主题
- 响应式布局，手机端自动适配
v0 会花 10-30 秒生成完整的 Next.js 应用。右侧 Preview 直接能看效果，Code 标签能看到生成的文件结构：
app/
layout.tsx # 全局布局
page.tsx # 首页
components/
ui/ # shadcn/ui 组件
navbar.tsx # 导航栏
hero.tsx # Hero 区域
project-card.tsx # 项目卡片
contact-form.tsx # 联系表单
lib/
utils.ts # 工具函数
第一个 React 组件实战
光看 UI 不够——来动手做一个真实能用的组件。在聊天框输入：
写一个 PriceCard React 组件，接受 props：
- title（字符串）
- price（数字）
- currency（字符串，默认"AUD"）
- features（字符串数组）
- highlighted（boolean，高亮时用不同边框颜色）
用 TypeScript + Tailwind CSS。
v0 生成的结果大概长这样：
interface PriceCardProps {
title: string
price: number
currency?: string
features: string[]
highlighted?: boolean
}
export function PriceCard({
title,
price,
currency = "AUD",
features,
highlighted = false,
}: PriceCardProps) {
return (
<div
className={`rounded-2xl border p-6 flex flex-col gap-4 ${
highlighted
? "border-indigo-500 shadow-lg shadow-indigo-500/20"
: "border-zinc-700"
}`}
>
<h3 className="text-xl font-semibold">{title}</h3>
<p className="text-4xl font-bold">
{currency} {price}
<span className="text-sm font-normal text-zinc-400">/月</span>
</p>
<ul className="flex flex-col gap-2 text-sm text-zinc-300">
{features.map((f) => (
<li key={f} className="flex items-center gap-2">
<span className="text-green-400">✓</span> {f}
</li>
))}
</ul>
</div>
)
}
几个值得注意的地方：
- 可选 prop 的默认值：
currency?和highlighted?带问号代表可选，在解构时直接写= "AUD"和= false设默认值，调用时不传也不报错。 - 条件 className：用模板字符串拼 Tailwind class 是 shadcn/ui 生态的惯用写法，
cn()工具函数（clsx+tailwind-merge）能做得更干净，v0 生成复杂组件时通常会自动引入。 - key prop：
features.map里key={f}是 React 列表渲染必填，v0 不会漏掉。
继续迭代：
highlight 状态改成顶部有渐变色条，而不是边框
v0 会在 Code 标签里高亮改动行，类似 GitHub diff 视图，只改了哪几行一目了然，不用通读整个组件。
迭代修改
不满意？直接在聊天里说：
- "把 Hero 区域的背景换成渐变色"
- "项目卡片加上悬浮放大效果"
- "导航栏改成固定在顶部"
每次修改 v0 都会生成新版本，所有历史版本都保存着，随时回滚。
还有个省钱技巧：切换到 Design Mode，直接点击页面上的元素修改颜色、字体、间距、文字——这些操作不消耗额度。只有 AI 生成才扣 credits。
部署上线
满意了？点右上角 Deploy 按钮：
- v0 自动创建 Vercel 项目（名称前缀
v0-） - 几秒钟后给你一个
xxx.vercel.app的线上地址 - 自带 SSL 证书、全球 CDN、Serverless Functions
- 后续修改再点 Deploy 就更新同一个项目
如果需要自定义域名，部署后在 v0 界面直接配置就行。
与 GitHub + Vercel 联动
一次性演示用 Deploy 按钮就够了。如果要正经维护项目，v0 内建的 Git 工作流更合适：
第一步：连接 GitHub 仓库。 在 v0 顶部找到 Git 面板，点 "Connect to GitHub"，授权时需要允许仓库写权限（这里和注册时不同）。授权后选择要推送的仓库，可以新建空仓库或连已有的 repo。
第二步：每轮对话对应一个分支。 连上 GitHub 后，v0 顶部会出现 "Create Branch" 按钮。点击后把当前这轮对话的所有改动推到一个独立分支，比如 v0/feat-price-card。这样不同功能的改动互不干扰。
第三步：PR → 预览 → 合并发布。 在 GitHub 里对 main 开 PR，Vercel 自动为这个 PR 生成预览链接——每次 push 都刷新预览。确认没问题了 merge 进 main，Vercel 触发正式部署，xxx.vercel.app 自动更新，全程不用手动操作。
环境变量同步。 如果应用需要 API key 或数据库连接串，在 v0 侧边栏 "Vars" 标签里填，部署时自动同步到 Vercel Environment Variables，不用单独登录 Vercel 控制台操作。
这套流程和普通前端团队用 GitHub + Vercel CI/CD 的方式完全一致，v0 只是把手写代码的环节替换掉了。
到这一步，你已经从零到上线了一个网站，全程没写一行代码。
