AI原生前端开发（039）：AI辅助的Nuxt 4全栈开发

前言

Nuxt 4是Vue生态的强大全栈框架！AI可以帮我们快速开发Nuxt应用！

1. Nuxt 4基础开发

1.1 页面与布局

vue 复制代码

<!-- app.vue -->
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- layouts/default.vue -->
<template>
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow-sm p-4">
      <nav class="flex gap-4">
        <NuxtLink to="/" class="font-bold">首页</NuxtLink>
        <NuxtLink to="/products" class="font-bold">产品</NuxtLink>
        <NuxtLink to="/about" class="font-bold">关于</NuxtLink>
      </nav>
    </header>
    <main class="container mx-auto p-4">
      <slot />
    </main>
  </div>
</template>

<!-- pages/index.vue -->
<template>
  <div class="space-y-4">
    <h1 class="text-2xl font-bold">欢迎来到Nuxt应用</h1>
    <p class="text-gray-600">这是一个AI驱动的Nuxt 4应用</p>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: '首页',
  meta: [{ name: 'description', content: 'Nuxt 4应用首页' }]
});
</script>

1.2 Server Routes

typescript 复制代码

// server/api/products.get.ts
export default defineEventHandler(async () => {
  const products = [
    { id: '1', name: '产品A', price: 100 },
    { id: '2', name: '产品B', price: 200 },
    { id: '3', name: '产品C', price: 300 }
  ];

  return { products };
});

// server/api/products/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  return { id, name: `产品${id}`, price: 100 * parseInt(id) };
});

// server/api/products.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  return { id: Date.now().toString(), ...body };
});

1.3 数据获取

vue 复制代码

<!-- pages/products/index.vue -->
<template>
  <div class="space-y-4">
    <h1 class="text-2xl font-bold">产品列表</h1>
    
    <div v-if="pending" class="p-4 border rounded">
      加载中...
    </div>
    
    <div v-else-if="error" class="p-4 bg-red-50 text-red-700 rounded">
      {{ error.message }}
    </div>
    
    <div v-else class="grid md:grid-cols-2 gap-4">
      <div 
        v-for="product in data?.products" 
        :key="product.id"
        class="p-4 border rounded-lg"
      >
        <h3 class="font-bold">{{ product.name }}</h3>
        <p class="text-gray-600">¥{{ product.price }}</p>
        <NuxtLink 
          :to="`/products/${product.id}`"
          class="text-blue-600 hover:underline"
        >
          查看详情 →
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: string;
  name: string;
  price: number;
}

const { data, pending, error } = await useFetch<{ products: Product[] }>('/api/products');
</script>

2. 今日小结

这一篇我们学习了：

Nuxt 4基础开发
Server Routes
数据获取

3. 下篇预告

下一篇，我们学习 AI驱动的组件设计与开发！