Nuxt3框架

Nuxt3是Vue.js生态中一个基于Vite的元框架，专为构建现代Web应用设计。它提供了开箱即用的服务端渲染、静态站点生成、API路由等特性，同时优化了开发体验和性能表现。

Nuxt3的核心特性

Nuxt3相比前代有显著改进，主要特性包括：

1. 基于Vite：构建速度大幅提升，支持热模块替换
2. 组合式API优先：全面拥抱Vue3的组合式API
3. Nitro引擎：提供跨平台服务端能力
4. 文件系统路由：自动根据pages/目录结构生成路由
5. 模块化架构：通过模块扩展功能

// 示例：Nuxt3页面组件基本结构
<script setup>
// 使用组合式API
const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <div>
    <h1>Counter: {{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

项目结构与配置

典型的Nuxt3项目结构如下：

├── assets/          # 静态资源
├── components/      # Vue组件
├── composables/     # 组合式函数
├── layouts/         # 布局组件
├── pages/           # 自动生成路由
├── plugins/         # Vue插件
├── public/          # 公共文件
├── server/          # API路由和中间件
├── app.vue          # 主入口
└── nuxt.config.ts   # 配置文件

配置文件示例：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || '/api'
    }
  }
})

数据获取方法

Nuxt3提供了多种数据获取方式：

1. useAsyncData

<script setup>
const { data: posts } = await useAsyncData('posts', () => 
  $fetch('/api/posts')
)
</script>

2. useFetch

<script setup>
const { data: user } = await useFetch('/api/user/123')
</script>

3. 服务端API

// server/api/user/[id].ts
export default defineEventHandler(async (event) => {
  const id = event.context.params.id
  return await getUserById(id)
})

状态管理方案

Nuxt3推荐使用可组合函数进行状态管理：

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('counter', () => 0)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  
  return { count, increment, decrement }
}

使用示例：

<script setup>
const { count, increment } = useCounter()
</script>

服务端功能

Nuxt3的Nitro引擎支持强大的服务端功能：

1. API路由

// server/api/hello.ts
export default defineEventHandler(() => {
  return { message: 'Hello Nuxt3!' }
})

2. 服务端中间件

// server/middleware/auth.ts
export default defineEventHandler((event) => {
  const token = getHeader(event, 'Authorization')
  if (!token) {
    throw createError({ statusCode: 401 })
  }
})

3. 服务端工具

// 读取请求体
const body = await readBody(event)
// 获取查询参数
const query = getQuery(event)
// 设置响应头
setHeader(event, 'Cache-Control', 'max-age=60')

部署策略

Nuxt3支持多种部署方式：

1. Node.js服务器：

   npx nuxi build
   node .output/server/index.mjs
   

2. 静态站点(SSG)：

   npx nuxi generate
   

3. Serverless部署：

   npx nuxi build --preset vercel
   

性能优化技巧

1. 组件自动导入：

   // nuxt.config.ts
   export default defineNuxtConfig({
     components: {
       global: true,
       dirs: ['~/components']
     }
   })
   

2. 图片优化：

   <NuxtImg 
     src="/images/hero.jpg" 
     width="800" 
     height="600"
     format="webp"
   />
   

3. 延迟加载组件：

   const LazyModal = defineAsyncComponent(() =>
     import('~/components/Modal.vue')
   )
   

生态整合

Nuxt3可以轻松集成流行工具：

1. Tailwind CSS：

   npx nuxi module add @nuxtjs/tailwindcss
   

2. Pinia状态管理：

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@pinia/nuxt']
   })
   

3. 内容模块：

   npx nuxi module add @nuxt/content
   

开发调试技巧

1. DevTools集成：

   // nuxt.config.ts
   export default defineNuxtConfig({
     devtools: { enabled: true }
   })
   

2. 错误处理：

   <template>
     <div v-if="error">
       {{ error.message }}
     </div>
     <div v-else>
       <!-- 正常内容 -->
     </div>
   </template>
   
   <script setup>
   const { data, error } = await useFetch('/api/data')
   </script>
   

3. 环境变量：

   # .env
   API_BASE=https://api.example.com
   

   // 使用环境变量
   const runtimeConfig = useRuntimeConfig()
   const apiBase = runtimeConfig.public.apiBase
   

实际应用案例

电商产品页面实现：

<!-- pages/products/[id].vue -->
<script setup>
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)
const { addToCart } = useCart()
</script>

<template>
  <div v-if="product">
    <h1>{{ product.name }}</h1>
    <img :src="product.image" :alt="product.name">
    <p>{{ product.description }}</p>
    <button @click="addToCart(product)">加入购物车</button>
  </div>
</template>

高级特性探索

1. 插件系统：

   // plugins/my-plugin.ts
   export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.provide('hello', (name: string) => `Hello ${name}!`)
   })
   

2. 自定义钩子：

   // nuxt.config.ts
   export default defineNuxtConfig({
     hooks: {
       'pages:extend'(pages) {
         pages.push({
           name: 'custom-page',
           path: '/custom',
           file: '~/extra-pages/custom.vue'
         })
       }
     }
   })
   

3. 实验性功能：

   // 启用视图过渡
   export default defineNuxtConfig({
     experimental: {
       viewTransition: true
     }
   })