v0 + Bolt.new：AI 全栈开发实战教程

前言

v0 和 Bolt.new 是两款革命性的 AI 开发工具：

• v0：Vercel 出品，专注于 UI 组件生成
• Bolt.new：全栈应用生成器，一键创建完整项目

今天我们用它们从零搭建一个任务管理应用。

第一步：用 v0 设计 UI

打开 v0.dev，输入：

创建一个现代的任务管理应用 UI，包含：
- 顶部导航栏（logo、搜索框、用户头像）
- 左侧边栏（项目列表、标签筛选）
- 主内容区（任务卡片列表，支持拖拽排序）
- 右侧详情面板（任务详情、子任务、评论）
- 使用 Tailwind CSS 和 shadcn/ui 组件库
- 支持深色模式

v0 会生成一个完整的 UI 设计，包含所有交互细节。

v0 生成的组件示例

// TaskCard 组件
export function TaskCard({ task }: { task: Task }) {
  return (
    <Card className="group cursor-pointer hover:shadow-md transition-shadow">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <Badge variant={task.priority === 'high' ? 'destructive' : 'secondary'}>
            {task.priority}
          </Badge>
          <Button variant="ghost" size="icon" className="opacity-0 group-hover:opacity-100">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <h3 className="font-semibold">{task.title}</h3>
        <p className="text-sm text-muted-foreground mt-1">{task.description}</p>
        <div className="flex items-center gap-2 mt-4">
          <Avatar className="h-6 w-6">
            <AvatarImage src={task.assignee.avatar} />
          </Avatar>
          <span className="text-xs text-muted-foreground">{task.dueDate}</span>
        </div>
      </CardContent>
    </Card>
  );
}

第二步：用 Bolt.new 搭建后端

打开 bolt.new，输入：

创建一个任务管理应用的后端 API，使用：
- Next.js 14 App Router
- Prisma + PostgreSQL
- NextAuth.js 认证
- RESTful API

功能：
- 用户注册/登录
- CRUD 任务（标题、描述、优先级、截止日期、状态）
- 项目管理（一个项目包含多个任务）
- 任务评论
- 任务分配给团队成员

Bolt 生成的 API 示例

// app/api/tasks/route.ts
import { prisma } from '@/lib/prisma';
import { auth } from '@/auth';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const session = await auth();
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { searchParams } = new URL(request.url);
  const projectId = searchParams.get('projectId');

  const tasks = await prisma.task.findMany({
    where: {
      projectId: projectId || undefined,
      project: {
        members: {
          some: { userId: session.user.id }
        }
      }
    },
    include: {
      assignee: true,
      comments: { take: 5 },
    },
    orderBy: { createdAt: 'desc' },
  });

  return NextResponse.json(tasks);
}

export async function POST(request: Request) {
  const session = await auth();
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const body = await request.json();

  const task = await prisma.task.create({
    data: {
      title: body.title,
      description: body.description,
      priority: body.priority,
      dueDate: body.dueDate,
      projectId: body.projectId,
      createdById: session.user.id,
    },
  });

  return NextResponse.json(task, { status: 201 });
}

第三步：整合前后端

1. 将 v0 组件集成到项目

# 复制 v0 生成的组件到项目
cp -r v0-components/* src/components/

2. 连接 API

// hooks/useTasks.ts
import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

export function useTasks(projectId?: string) {
  const { data, error, mutate } = useSWR(
    `/api/tasks${projectId ? `?projectId=${projectId}` : ''}`,
    fetcher
  );

  const createTask = async (task: CreateTaskInput) => {
    const res = await fetch('/api/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(task),
    });
    const newTask = await res.json();
    mutate([...data, newTask]);
    return newTask;
  };

  return {
    tasks: data,
    isLoading: !error && !data,
    error,
    createTask,
  };
}

3. 组装页面

// app/dashboard/page.tsx
'use client';

import { Sidebar } from '@/components/Sidebar';
import { TaskBoard } from '@/components/TaskBoard';
import { TaskDetail } from '@/components/TaskDetail';
import { useTasks } from '@/hooks/useTasks';

export default function DashboardPage() {
  const { tasks, isLoading, createTask } = useTasks();
  const [selectedTask, setSelectedTask] = useState(null);

  if (isLoading) return <LoadingSpinner />;

  return (
    <div className="flex h-screen">
      <Sidebar />
      <TaskBoard
        tasks={tasks}
        onTaskClick={setSelectedTask}
        onCreateTask={createTask}
      />
      {selectedTask && (
        <TaskDetail
          task={selectedTask}
          onClose={() => setSelectedTask(null)}
        />
      )}
    </div>
  );
}

第四步：部署

Vercel 一键部署

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

# 设置环境变量
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET

完整项目结构

my-task-app/
├── app/
│   ├── api/
│   │   ├── tasks/
│   │   ├── projects/
│   │   └── auth/
│   ├── dashboard/
│   └── layout.tsx
├── components/
│   ├── ui/           # shadcn/ui 组件
│   ├── TaskCard.tsx  # v0 生成
│   ├── TaskBoard.tsx # v0 生成
│   └── Sidebar.tsx   # v0 生成
├── hooks/
├── lib/
│   └── prisma.ts
└── prisma/
    └── schema.prisma

开发效率对比

| 传统方式 | AI 辅助 | |---------|---------| | UI 设计：2 天 | v0：30 分钟 | | 后端 API：3 天 | Bolt.new：1 小时 | | 整合调试：2 天 | 手动：半天 | | 总计：7 天 | 总计：1 天 |

注意事项

1. AI 生成代码需要审查：检查安全性和业务逻辑
2. 逐步迭代：不要一次生成太多，分步验证
3. 保持一致性：确保 v0 和 Bolt 使用相同的技术栈

总结

v0 + Bolt.new 的组合让全栈开发变得前所未有的高效。从想法到上线，可能只需要一天时间。

---

下一步：Prompt 工程技巧 - 学习如何写出更好的 AI 指令