v0 快速速览
- v0.dev 是 Vercel 的 AI 应用构建器:用大白话描述应用(或贴截图、Figma 文件),它生成一个能跑的 Next.js 应用,预览和代码并排。
- 想法太薄用 Enhanced Prompt 扩写;要改单个组件就用元素选择器;改砸了用版本列表回滚。
- 部署到 Vercel 只要一键,GitHub 同步会把每次提示词改动推到你的仓库——代码永远不会被锁在 v0 里。
- 真数据要接 Supabase 集成:在 v0 设置里建库,让 v0 跑它的 SQL 脚本(先删掉 JWT 那行),应用就有邮箱登录和按用户隔离的数据。
How to use v0.dev by Vercel For Beginners
来源视频:Code with Nathan12:28
截图取自来源视频,均附时间戳深链署名。文字讲解为我们基于完整字幕独立撰写,事实与视频一致。
本教程是面向文字读者的独立图解版。想支持创作者,请观看上方链接的 Code with Nathan 频道原视频。
在 v0 里做一个应用:分步图解
- 1
从 v0.dev 开始
在 v0.dev 注册免费账号。侧边栏是你的聊天和项目;中间的大输入框是一切的起点。周围排着快捷操作——克隆截图、导入 Figma、落地页模板——附件按钮支持图片和 Figma 文件作为设计输入。
v0.dev 输入框,带快捷操作和模型芯片。视频 2:00 处 - 2
用 Enhanced Prompt 扩写想法
只写「一个笔记应用」给 v0 的信息太少了。Enhanced Prompt 按钮会把它扩写成包含核心功能、用户认证和响应式设计的完整需求。如果你已有详细提示词就别用——扩写也可能把应用带偏。日常 UI 用 medium 模型,性价比最好;复杂构建再上 large。
Enhanced Prompt 把一句话变成真正的需求。视频 2:15 处 - 3
逛逛社区项目
输入框下方是社区画廊,全是别人做好的作品——作品集、落地页、好玩的小实验。点 Open in v0 会把项目复制进你的账号,代码随便看、随便改。有现成接近的,就别从零开始。
社区画廊:Open in v0 把项目复制给你。视频 3:00 处 - 4
生成你的应用
示例提示词:「一个基于 markdown 的笔记应用,要文件夹、标签、搜索和语法高亮。」回车后 v0 先规划,再把代码流式写进 Code 视图,文件实时出现。约一分钟后,做完的应用就在预览窗格里了。
看着 v0 流式生成 app/page.tsx。视频 4:00 处 - 5
在预览里实测
先像真实用户一样用一遍:编辑笔记标题和正文、在文件夹里新建、删一条、搜一下。现在发现行为缺口,一句精确的追问就能补上;等改多了才发现,就要多绕好几圈。
在预览窗格里编辑笔记标题。视频 4:30 处 - 6
用元素选择器改单个组件
删除按钮和工具栏混在一起——点选择器图标,选中这个元素,只针对它下提示词:「给这个删除按钮用红色背景。」v0 会把修改范围锁定在这个组件,而不是重新生成整页,其他部分原样不动。
元素选择器把提示词锁定到单个组件。视频 9:00 处 - 7
用版本回滚
每次生成都会保留版本。打开版本下拉可以对比,迭代翻车时 Restore 一键回到旧状态——有了这张安全网,大胆试错才便宜。
Version 2 恢复卡——旧状态永远一键可回。视频 5:25 处 - 8
一键部署到 Vercel
Deploy 按钮把应用直接推上 Vercel:构建日志滚动、自定义域名分配,一分钟后你的应用就有了公开网址。之后的改动,从同一个菜单再点一次就能重新部署。
从预览到 Vercel 线上网址,只要一下。视频 6:00 处 - 9
同步到 GitHub
点 GitHub 图标,授权 v0,给仓库起名,创建。此后每次提示词改动都会推到你仓库的分支上——也可以随时把代码下载成 zip 或用 npx 拉进现有工程。项目永远不会被锁在 v0 里。
创建 v0 将要推送的 GitHub 仓库。视频 7:00 处 - 10
连接 Supabase
存在浏览器里的数据,换个浏览器就没了。打开 Settings → Integrations → Supabase,接受条款,选区域和免费套餐,创建数据库。v0 会自动把它挂到你的 Vercel 项目上——不用你来回跳控制台。
v0 里的 Supabase Create Database 对话框。视频 8:30 处 - 11
加邮箱登录
提示:「建一套邮箱加密码的认证系统,数据都存进 Supabase。」v0 生成登录注册页,外加一个创建数据表和安全策略的 SQL 脚本。此刻应用的数据还在 localStorage 里——这一步之后才真正进了数据库。
v0 规划认证系统,并备好 SQL 脚本。视频 9:10 处 - 12
跑 SQL 脚本——先删掉 JWT 那行
视频里特别点了一个坑:如果脚本里有设置 app.jwt_secret 的一行,先删掉再跑——因为创建 Supabase 时密钥已经配好,这行会报错。然后在 v0 里 Apply 执行,建好 folders、notes 表和权限策略。
建表脚本——删掉 JWT 行——准备执行。视频 9:30 处 - 13
验证数据真的落库了
在预览里注册、往文件夹里记几条笔记,换个浏览器再打开——数据都在了。数据存进 Supabase 表、按用户隔离,应用也成了真正的全栈产品:提示词生成前端,集成生成数据库,部署在 Vercel。
登录后笔记稳稳存进 Supabase。视频 10:10 处