v0 — Vercel AI 前端生成工具¶

v0 完全在线使用，不需要安装！

需要准备：
- 浏览器（Chrome/Edge/Firefox）
- v0 账号（用 GitHub/Google 登录）
- 可选：Vercel 账号（用于部署）

1. 打开 https://v0.app
2. 登录账号
3. 在输入框中描述你想要的 UI
4. v0 生成 React 代码和预览
5. 继续对话迭代优化
6. 满意后复制代码或一键部署

# 在 v0 输入框中输入：

# 生成一个导航栏
"做一个现代风格的导航栏，包含 logo、导航链接和登录按钮，
响应式设计，移动端显示汉堡菜单"

# 生成一个定价页面
"做一个 SaaS 产品的定价页面，三个套餐：基础版、专业版、企业版，
包含功能对比表，专业版高亮显示为推荐"

# 生成一个数据表格
"做一个用户管理表格，包含姓名、邮箱、角色、状态列，
支持搜索、排序、分页，可以编辑和删除用户"

# v0 会生成：
# - 完整的 React/TypeScript 代码
# - 使用 Tailwind CSS 样式
# - 基于 shadcn/ui 组件库
# - 自带响应式设计和无障碍访问

除了文字描述，还可以：
1. 截取你喜欢的网站设计
2. 上传到 v0
3. v0 会还原这个设计并生成代码

比如：截一张 GitHub 首页的图 → v0 会生成类似布局的代码

生成第一版后，可以继续对话：

"让侧边栏可以折叠"
"把按钮改成圆角风格"
"加一个加载骨架屏状态"
"颜色换成蓝色主题"
"让表格支持拖拽排序"

v0 不是一次性生成器，它支持多轮对话迭代
就像和一个设计师反复沟通一样

v0 现在不只能生成单个组件，还能做整个应用：

"做一个 SaaS 仪表板应用，包含：
- 登录页面
- 仪表板首页
- 用户设置页面
- 数据分析页面
包含路由和布局组件"

v0 会生成完整的项目结构：
├── app/
│   ├── layout.tsx        # 全局布局
│   ├── page.tsx          # 首页
│   ├── login/page.tsx    # 登录页
│   ├── dashboard/page.tsx # 仪表板
│   ├── settings/page.tsx  # 设置页
│   └── analytics/page.tsx # 分析页
├── components/           # 组件目录
└── lib/                  # 工具函数

v0 现在支持 Git 工作流：
1. 每个对话自动创建一个分支
2. 可以从 v0 直接开 PR
3. 合并后自动部署
4. 非技术人员也能通过 v0 提交前端修改

这意味着产品经理可以直接在 v0 里改前端，
通过 Git PR 提交给开发审查

v0 可以导入现有项目：
1. 粘贴 GitHub 仓库地址
2. v0 拉取代码到沙盒环境
3. 同步 Vercel 环境变量
4. 在沙盒中构建和运行
5. 你可以在 v0 中修改现有项目的代码

v0 现在支持连接数据库：
- Snowflake
- AWS 数据库
- 可以直接用真实数据构建仪表板

步骤：
1. 在项目设置中添加数据库连接
2. v0 会读取表结构
3. 自动生成数据展示组件

# 方法一：直接复制代码
# 点击代码面板 → 复制代码 → 粘贴到你的项目

# 方法二：使用 shadcn CLI 安装组件
npx shadcn@latest add "v0生成的组件URL"  # 自动安装到你的项目

# 方法三：一键部署到 Vercel
# 点击 Deploy → 自动创建 Vercel 项目 → 获得公网 URL