Nuxt4 框架概述

import { createPinia } from 'pinia';
import { createApp } from 'vue';
// 需要大量配置
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: []
});
const pinia = createPinia();
const app = createApp(App);

app.use(router);
app.use(pinia);
app.mount('#app');

<!-- pages/index.vue -->
<template>
  <div>
    <h1>欢迎来到 Nuxt4</h1>
    <NuxtLink to="/about">
      关于我们
    </NuxtLink>
  </div>
</template>

<script setup>
// 一切都是自动配置的
const { data } = await useFetch('/api/data');
</script>

项目结构:
├── pages/              # 前端页面
├── components/         # Vue 组件
├── server/            # 服务器端代码
│   ├── api/          # API 路由
│   └── middleware/   # 服务器中间件
├── composables/       # 组合式函数
├── plugins/          # 插件
└── nuxt.config.ts    # 配置文件

export default defineNuxtConfig({
  // 自动性能优化
  experimental: {
    payloadExtraction: false,
    inlineSSRStyles: false
  },

  // 智能渲染策略
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/api/**': { cors: true }
  }
});

// nuxt.config.ts
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  }
});

# 创建新的 Nuxt 4 项目
pnpm create nuxt@4 my-nuxt4-project

# 或者在现有项目中安装 Alpha 版本
pnpm add nuxt@4

<!-- Vue 3 核心特性示例 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>访问次数: {{ count }}</p>
    <button @click="increment">
      增加
    </button>
  </div>
</template>

<script setup>
// Composition API - 无需导入
const count = ref(0);
const title = computed(() => `计数器: ${count.value}`);

// 响应式系统自动处理依赖
function increment() {
  count.value++;
}

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});
</script>

// Vite 配置示例
export default defineNuxtConfig({
  vite: {
    // 开发服务器配置
    server: {
      hmr: {
        port: 24678, // 热重载端口
        host: 'localhost'
      }
    },

    // 构建优化
    build: {
      // 代码分割策略
      rollupOptions: {
        output: {
          manualChunks: {
            'vue-vendor': ['vue', 'vue-router'],
            'ui-vendor': ['@headlessui/vue', '@heroicons/vue']
          }
        }
      },
      // 压缩配置
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      }
    },

    // 插件配置
    plugins: [
      // 自动导入优化
      AutoImport({
        imports: ['vue', 'vue-router', '@vueuse/core']
      })
    ]
  }
});

// Nitro 配置示例
export default defineNuxtConfig({
  nitro: {
    // 预渲染配置
    prerender: {
      routes: ['/sitemap.xml', '/robots.txt', '/'],
      ignore: ['/admin/**', '/api/**']
    },

    // 压缩配置
    compressPublicAssets: true,

    // 服务器中间件
    serverHandlers: [
      {
        route: '/api/health',
        handler: '~/server/api/health.get.ts'
      }
    ],

    // 部署预设
    preset: 'node-server', // 或 'vercel', 'netlify', 'cloudflare'

    // 实验性功能
    experimental: {
      wasm: true // WebAssembly 支持
    }
  },

  // 路由规则
  routeRules: {
    // 静态页面
    '/': { prerender: true },
    '/about': { prerender: true },

    // ISR 页面
    '/blog/**': { isr: 60 },
    '/products/**': { isr: 3600 },

    // SPA 页面
    '/admin/**': { ssr: false },
    '/dashboard/**': { ssr: false },

    // API 路由
    '/api/**': {
      cors: true,
      headers: { 'cache-control': 's-maxage=60' }
    }
  }
});

// UnJS 工具链配置示例
export default defineNuxtConfig({
  // 自动导入配置
  imports: {
    dirs: [
      // 自动导入目录
      'composables',
      'composables/*/index.{ts,js,mjs,mts}',
      'composables/**',
      'utils/**'
    ]
  },

  // 组件自动导入
  components: [
    {
      path: '~/components',
      // 启用前缀
      prefix: 'App'
    },
    {
      path: '~/components/ui',
      // 全局组件
      global: true
    }
  ],

  // 类型生成
  typescript: {
    typeCheck: true, // 构建时类型检查
    strict: true, // 严格模式
    // 自定义类型
    tsConfig: {
      compilerOptions: {
        strict: true,
        noImplicitAny: true
      }
    }
  },

  // 自动导入第三方库
  auto: {
    imports: [
      // Vue 生态
      'vue',
      'vue-router',
      '@vueuse/core',
      'pinia',

      // 工具库
      'lodash-es',
      'dayjs',

      // 自定义导入
      {
        'my-lib': ['myFunction', 'myOtherFunction']
      }
    ]
  }
});

pages/
├── index.vue                    # → /
├── about.vue                   # → /about
├── blog/
│   ├── index.vue              # → /blog
│   ├── [slug].vue             # → /blog/:slug
│   └── [...slug].vue          # → /blog/:slug*
└── user/
    ├── index.vue              # → /user
    ├── [id].vue               # → /user/:id
    └── settings.vue           # → /user/settings

<!-- 无需手动导入 -->
<template>
  <div>
    <!-- 组件自动导入 -->
    <UiButton @click="handleLogin">
      登录
    </UiButton>
    <BaseModal v-model="showModal">
      <LoginForm @success="onLoginSuccess" />
    </BaseModal>
  </div>
</template>

<script setup>
// Composables 自动导入
const user = useAuthUser();
const { login } = useAuth();
const router = useRouter();
const { $toast } = useNuxtApp();

// 工具函数自动导入
const formatDate = date => useDateFormat(date, 'YYYY-MM-DD');
const debounced = useDebounce(searchQuery, 300);

// 第三方库自动导入
const { copy } = useClipboard();
const { pause, resume } = useIntervalFn(() => {
  // 定时任务
}, 1000);

const showModal = ref(false);

async function handleLogin() {
  try {
    await login(credentials);
    $toast.success('登录成功');
    router.push('/dashboard');
  } catch (error) {
    $toast.error('登录失败');
  }
}
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 静态页面缓存
    '/': {
      prerender: true,
      headers: { 'cache-control': 's-maxage=31536000' }
    },

    // 动态页面缓存
    '/blog/**': {
      isr: 60,
      headers: { 'cache-control': 's-maxage=60' }
    },

    // API 缓存
    '/api/public/**': {
      cors: true,
      headers: { 'cache-control': 's-maxage=300' }
    },

    // 禁用缓存
    '/api/private/**': {
      headers: { 'cache-control': 'no-cache' }
    }
  }
});

<template>
  <div>
    <!-- 响应式数据绑定 -->
    <input v-model="searchQuery" placeholder="搜索...">

    <!-- 计算属性 -->
    <p>搜索结果: {{ filteredResults.length }} 条</p>

    <!-- 响应式列表渲染 -->
    <ul>
      <li v-for="item in filteredResults" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
// 响应式数据
const searchQuery = ref('');
const items = ref([]);

// 计算属性 - 自动依赖收集
const filteredResults = computed(() => {
  if (!searchQuery.value)
    return items.value;

  return items.value.filter(item =>
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

// 侦听器 - 响应式更新
watch(searchQuery, (newQuery) => {
  console.log('搜索词更新:', newQuery);
});

// 数据获取
const { data } = await useFetch('/api/items');
items.value = data.value;
</script>

<!-- pages/product/[id].vue -->
<template>
  <div>
    <h1>{{ product.name }}</h1>
    <p>{{ product.description }}</p>
    <img :src="product.image" :alt="product.name">

    <!-- 客户端交互 -->
    <button :disabled="loading" @click="addToCart">
      {{ loading ? '添加中...' : '加入购物车' }}
    </button>
  </div>
</template>

<script setup>
const route = useRoute();
const productId = route.params.id;

// 服务端数据获取 - SEO友好
const { data: product } = await useFetch(`/api/products/${productId}`);

// 客户端状态
const loading = ref(false);

// 客户端交互
async function addToCart() {
  loading.value = true;
  try {
    await $fetch('/api/cart/add', {
      method: 'POST',
      body: { productId: product.value.id }
    });

    // 显示成功消息
    await useToast().success('已添加到购物车');
  } finally {
    loading.value = false;
  }
}

// 动态SEO
useSeoMeta({
  title: product.value.name,
  description: product.value.description,
  ogImage: product.value.image
});
</script>

Nuxt4 项目结构:
├── app/                    # 新增：应用代码目录
│   ├── components/         # Vue 组件
│   ├── composables/        # 组合式函数
│   ├── layouts/           # 布局文件
│   ├── middleware/        # 路由中间件
│   ├── pages/             # 页面文件
│   ├── plugins/           # 插件
│   └── utils/             # 工具函数
├── server/                # 服务器端代码
├── public/                # 静态资源
└── nuxt.config.ts        # 配置文件

<!-- ComponentA.vue -->
<script setup>
const { data: users, pending } = useAsyncData('users', fetchUsers);
</script>

<!-- ComponentB.vue -->
<script setup>
// 这将引用与 ComponentA 相同的数据状态
const { data: users, status } = useAsyncData('users', fetchUsers);
// 当任一组件刷新数据时，两者都会一致更新
</script>

const userId = ref('123');
const { data: user } = useAsyncData(
  computed(() => `user-${userId.value}`),
  () => fetchUser(userId.value)
);

// 改变 userId 将自动触发新的数据获取
// 如果没有其他组件使用旧数据，会自动清理
userId.value = '456';

<template>
  <div>
    <!-- 基础用法 -->
    <NuxtTime :datetime="Date.now()" />

    <!-- 自定义格式 -->
    <NuxtTime
      :datetime="post.createdAt"
      :format="{
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      }"
    />
  </div>
</template>

<NuxtErrorBoundary @error="handleError">
  <template #error="{ error, clearError }">
    <div class="error-container">
      <h2>出错了!</h2>
      <p>{{ error.message }}</p>
      <button @click="clearError">重试</button>
    </div>
  </template>

  <!-- 可能出错的内容 -->
  <MyComponent />
</NuxtErrorBoundary>

// 自动优化的数据获取
const { data } = useAsyncData(
  'users',
  () => $fetch(`/api/users?page=${route.query.page}`),
  { watch: [() => route.query.page] }
);

// 当 route.query.page 改变时，只会发生一次获取操作
// 所有使用此 key 的组件会同时更新

// 新的模块兼容性检查
export default defineNuxtConfig({
  experimental: {
    enforceModuleCompatibility: true // Nuxt v4 中默认启用
  }
});

// 自动注册组件导出
export default defineNuxtModule({
  setup(options, nuxt) {
    // 自动注册文件中的所有命名导出组件
    addComponentExports({
      filePath: '~/components/MyComponents.ts'
    });
  }
});