type
status
date
slug
summary
tags
category
icon
password
V0 初体验：Vercel 的前端代码自动生成产品
1. 简介
Vercel 最近推出了 V0，这是一个很有意思的前端代码自动生成工具。本文将分享我们对 V0 的初步体验，包括其主要功能、使用感受以及个人反馈。
2. V0 的主要功能
我们先来看一下 v0 官方的介绍：
V0 是由 Vercel 开发的一个基于 AI 生成式的用户界面开发产品。 它根据 shadcn/ui 和 Tailwind CSS 生成可直接复用的 React 代码，供人们在他们的工程项目中使用。
你可以通过复制/粘贴或通过命令行界面（CLI）将生成的用户界面集成到您的 React 应用程序中。其中，CLI 将自动安装所需的依赖项并将生成的代码添加到你的项目中。
在 v0 中，你可以通过简单的文本描述来生成你的前端代码，生成的代码将使用预构建的组件和流行的 Tailwind CSS 库来样式化您的 UI 样式。
在这个过程中，如果对生成的代码不满意，你可以通过重新澄清你的需求，或者细化你的描述来重新生成代码。直到达到你想要的状态。
当代码符合的你的预期后，你就可以将代码复制到你自己的 Next.js 项目中直接使用了。
同时，在 v0 中，它还提供了一个非常棒的功能，根据描述生成组件代码后，你可以在 v0 页面中实时预览代码内容，这样可以在前期 UI 调整优化阶段，快速验证直到 UI 页面展示符合你的预期。
3. 快速上手
下面，我们来快速让 v0 帮助我们生成一个 WEB UI 的表格页面。它负责给我们的 WEB UI 智能测试项目提供前端任务列表展示页面。
3.1 澄清需求 & 生成组件代码
访问 v0 页面，发起一个新对话。
帮我生成一个 WEB UI 智能化测试 Agent 的任务列表展示页面，表格包含如下几列:任务ID、任务状态、开始时间、结束时间、Trace链接、触发用例、测试系统、操作 同时，该页面需要支持如下条件进行搜索过滤，分别是：用户名、任务状态、测试系统、登录用户 此外，该页面需要支持分页，为了便于展示，数据先进行 Mock。
接下来，v0 就开始基于我们的需求描述来帮助我们开始写代码啦。
同时，生成的代码还是实时在页面中能够进行预览。
表格该有的的确有了，不过好像不太好看，比如任务状态可以高亮，操作中需要支持的操作类型需要补充上。
下面，我们来继续进行引导：
不错，接下来需要进一步优化。其中: 1. 任务状态要针对不同状态进行不同颜色的显示 2. 操作列支持: 查看、重跑 3. 分页组件支持选择每页显示记录数
很快，页面更新啦：
不错，我们希望做的好像都差不多了，不过看起来还有一些优化空间：
还需要对以下点进行优化： 1. 调整一下页面的边距，现在整个页面太紧了，表格和搜索条件外部边距太小 2. 操作的查看和重跑按钮增加一些颜色样式 3. 每页显示记录默认设置为10条，可选10，20，50，100
这样看一下好多了。
下面，我们来看一下这个页面如何加入到我们的前端项目中。
3.2 创建本地项目
从此处开始还是需要一丢丢前端的知识的、
如果我们是从零开始新建一个项目，那么只需要执行如下命令即可：
然后，你需要将 v0 添加到你的项目中(如果你已经有一个 NextJS 的项目的话，直接执行如下命令即可)：
现在，你已经完成了你的项目初始化，下一步，就需要将你在上述引导中设计到的组件添加到你的项目中了。
3.3 应用生成的组件
在 v0 的对话页面中，点击终端的 iCon。
复制指定的 npx 命令，然后在你的项目目录下执行。
此时，它会自动安装相关的依赖，同时，将涉及到的代码按照目录结构在你的项目中创建并添加。
3.4 微调代码适配项目
接下来，你可能还需要对项目代码进行一些微调，包括：
- 将加入的组件对应的页面访问 URL 进行添加，并在需要跳转该页面的位置增加引用
- 将 mock 的数据调整为真实调用后端的服务
- 其他一些微调
如果你对前端本身不够了解，那么此处强烈推荐你使用 Cursor 来完成响应的任务，非常好用！
完成上述微调后，你的服务就可以正常启动啦！
4. 使用感受
4.1 交互简单
V0的使用非常直观，只需简单的文字描述或截图就能生成代码，对新手开发者也很友好。
4.2 样式简约大气
生成的界面设计简约而大气，对不擅长样式设计的开发者来说是一大福音。
4.3 实时预览功能
实时预览功能非常便捷，能够即时看到代码变更的效果，大大提高了开发效率。
4.4 全量生成限制
V0不支持对代码进行增量调整，每次都需要全量生成代码，这在某些情况下可能会比较耗时。
4.5 项目集成
V0无法完全端到端地应用到项目中，需要开发者手动将生成的代码添加到项目并进行一些微调。
5. 使用技巧与经验
- 新页面 & 新组件非常推荐从 v0 开始，如果是一些简单的静态页面，v0 也是非常棒的选择
- 充分利用实时预览功能进行快速迭代，在该阶段主要针对页面显示 & 样式的调整即可
- 页面 UI 基本完成后，可以基于 CLI 集成到自己的项目中
- 接下来可以与 Cursor 搭配，从而能够快速完成整体项目的打通。
6. 结论
V0 作为一个前端代码自动生成工具，展现了 AI 在开发领域的巨大潜力。虽然还有改进空间，但它无疑为前端开发带来了新的可能性。
对于想要快速构建原型或学习前端开发的人来说，V0 是一个非常值得尝试的工具。它给不太会前端开发，尤其是不擅长页面美观设计的人提供了非常强大的支持。
随着技术的不断发展，我们期待看到 V0 在未来会带来更多惊喜。无论您是经验丰富的开发者还是新手，V0 都值得一试。