Nuxt Vue全栈框架¶

# 创建Nuxt项目
npx nuxi init my-nuxt-app  # 使用Nuxt CLI创建
cd my-nuxt-app
npm install  # 安装依赖
npm run dev  # 启动开发服务器 → http://localhost:3000

my-nuxt-app/
├── app.vue              # 应用入口
├── pages/               # 页面（文件即路由）
│   ├── index.vue        # 首页 → /
│   └── about.vue        # 关于 → /about
├── components/          # 组件（自动导入）
├── composables/         # 组合函数（自动导入）
├── server/              # 服务端API
│   └── api/
│       └── hello.ts     # → /api/hello
├── layouts/             # 布局
├── middleware/           # 路由中间件
├── plugins/             # 插件
├── public/              # 静态资源
└── nuxt.config.ts       # Nuxt配置

<!-- pages/index.vue — 首页 -->
<template>
  <div>
    <h1>欢迎来到Nuxt</h1>
    <NuxtLink to="/about">关于页面</NuxtLink> <!-- Nuxt路由链接 -->
  </div>
</template>

<!-- pages/users/[id].vue — 动态路由 -->
<template>
  <div>
    <h1>用户 {{ route.params.id }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()  // 获取路由信息（自动导入，不需要import）
</script>

<!-- pages/posts.vue -->
<template>
  <div>
    <div v-if="status === 'pending'">加载中...</div>
    <div v-else-if="error">错误: {{ error.message }}</div>
    <ul v-else>
      <li v-for="post in data" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script setup>
// useFetch: Nuxt内置的数据获取函数，自动处理SSR
const { data, status, error } = await useFetch('/api/posts')
// 会在服务端获取数据，客户端直接用结果，不重复请求
</script>

// server/api/posts.get.ts（GET /api/posts）
export default defineEventHandler(async (event) => {
  // 这段代码只在服务端运行
  const posts = [
    { id: 1, title: '第一篇文章' },
    { id: 2, title: '第二篇文章' },
  ]
  return posts  // 自动序列化为JSON
})

// server/api/posts.post.ts（POST /api/posts）
export default defineEventHandler(async (event) => {
  const body = await readBody(event)  // 读取请求体
  // 保存到数据库...
  return { message: '创建成功', data: body }
})

// composables/useCounter.ts（自动导入，全局可用）
export const useCounter = () => {
  const count = useState('counter', () => 0)  // 跨组件共享状态
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useAuth()  // 假设有一个鉴权composable
  if (!user.value && to.path !== '/login') {
    return navigateTo('/login')  // 未登录重定向
  }
})

<script setup>
// 页面级SEO
useHead({
  title: '我的页面标题',
  meta: [
    { name: 'description', content: '页面描述' },
    { property: 'og:title', content: '分享标题' },
  ],
})

// 动态SEO
useSeoMeta({
  title: () => `${post.value?.title} - 我的博客`,
  ogTitle: () => post.value?.title,
  description: () => post.value?.excerpt,
})
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',   // Tailwind CSS集成
    '@pinia/nuxt',           // Pinia状态管理
    '@nuxt/image',           // 图片优化
    '@nuxtjs/i18n',          // 国际化
    '@vueuse/nuxt',          // Vue工具集
  ],
})

# CLI命令
npx nuxi init app          # 创建项目
npm run dev                 # 开发模式
npm run build               # 构建
npm run preview             # 预览构建结果
npx nuxi add page about    # 添加页面
npx nuxi add component Card # 添加组件
npx nuxi add composable useAuth # 添加composable
npx nuxi add middleware auth # 添加中间件