注册
v0 注册不要钱，不要信用卡。打开 v0.app，用以下任一方式登录：
- GitHub 账号（推荐，后面 Git 集成方便）
- Google 账号
- 邮箱
- 已有的 Vercel 账号
登录后自动获得每月 $5 免费额度，够跑完这个教程。
界面长什么样
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 # 工具函数迭代修改
不满意？直接在聊天里说：
- "把 Hero 区域的背景换成渐变色"
- "项目卡片加上悬浮放大效果"
- "导航栏改成固定在顶部"
每次修改 v0 都会生成新版本，所有历史版本都保存着，随时回滚。
还有个省钱技巧：切换到 Design Mode，直接点击页面上的元素修改颜色、字体、间距、文字——这些操作不消耗额度。只有 AI 生成才扣 credits。
部署上线
满意了？点右上角 Deploy 按钮：
- v0 自动创建 Vercel 项目（名称前缀
v0-） - 几秒钟后给你一个
xxx.vercel.app的线上地址 - 自带 SSL 证书、全球 CDN、Serverless Functions
- 后续修改再点 Deploy 就更新同一个项目
如果需要自定义域名，部署后在 v0 界面直接配置就行。
到这一步，你已经从零到上线了一个网站，全程没写一行代码。
