前端核弹：初试用 v0.dev 聊天做 UI

听说 https://v0.dev 改版了，加强了 ai 聊天的能力，昨天试着做了个 todo list 玩了一下，完成度相当高啊，而且可以定制化，比如我做的这个，就是用聊天的方式，让 ai 给我生成一个 ui 组件，然后我再稍微调整一下，就可以用了，下一步准备用 cursor 开发 api 和 oauth 。

先看看效果

https://cf-next-todo.pages.dev/

部署在 cloudflare ，目前不登录可以使用，数据保存在 localStorage。

代码 Github Repo

使用

• 创建项目

npm create cloudflare@latest -- cf-next-todo --framework=next

• 安装 v0.dev 聊天做好的 ui 组件：

可能有多个组件，所以可能执行需要多次: 比如我的是 todo-list，regist-form，login-form

npx shadcn@latest add "https://v0.dev/chat/b/组件 1token"
npx shadcn@latest add "https://v0.dev/chat/b/组件 2token"
npx shadcn@latest add "https://v0.dev/chat/b/组件 3token"

• 修改 src/app/page.js

import { TodoList } from '@/components/todo-list'

export default function Home() {
  return (
    <main className="container mx-auto px-4">
      <TodoList />
    </main>
  )
}

• 部署到 cloudflare

npm run deploy