说起来，

前言

Nuxt 是 Vue 环境中最成熟的全栈框架。从 Nuxt 到 Nuxt 再到 Nuxt，每一次大版本迭代都带来了底层架构的质的飞跃。Nuxt 基于 Vue 、Nitro 和 Vite 建立。在保持 Nuxt 优秀设计的基础上，进行了大量破坏性升级，重新定义了目录结构、渲染策略和开发者体验的标准。

这篇文章基于 Nuxt . 编写，覆盖所有新特性、Breaking Changes、还有真实生产环境中的复杂使用场景。

一、Nuxt 的主要架构

技术栈全景

┌────────────────────────────────────────────────────────────────┐│ Nuxt 应用 │├────────────────────────────────────────────────────────────────┤│ Vue │ Nitro Server Engine ││ ├── app/pages/ │ ├── API Routes ││ ├── app/components/ │ ├── Serverless ││ ├── app/composables/ │ ├── Edge Functions ││ ├── app/layouts/ │ ├── Hybrid Rendering ││ └── app/plugins/ │ └── Route Rules │├────────────────────────────────────────────────────────────────┤│ Vite 建立工具 ││ ├── HMR │ Rollup Bundler ││ ├── TypeScript 原生支持 │ WASM 插件环境 ││ └── Env Variables / 资源处理 │ LightningCSS │└────────────────────────────────────────────────────────────────┘

Nux…vs Nux，主要差异

至于目录结构，Nux…的 app/ 革命

Nux…最关键的 Breaking Change — 所有前端相关代码迁移到 app/ 目录

# Nux…目录结构
├── nuxt.config.ts # 配置文件
├── app/ # ⭐ 主要目录
│ ├── app.vue # 应用入口
│ ...
└── server/ # 服务端代码
...

二、基础配置与约定

nuxt.config.ts 主要配置 

// nuxt.config.ts
export default defineNuxtConfig({
compatibilityDate: '--'。
future: { compatibilityVersion: /* 填入目标版本 */ },app: {
说到head，{ /* 页面头部配置 */ }
},modules:,css:,devtools: { enabled: true }
})

自动导入 

Nux…的自动导入能力在 Nux…. 基础上进一步提高：

// app/composables/useCounter.ts
export const useCounter = => {
const count = useState => /* 初始值 */)
// ...
}


vue

`` // 自动导入范围` 表示组件、组合式函数等无需手动 import。这能极大减少 boilerplate。但若项目已有大量自定义方法，需要检查冲突。

• 再看痛点1。自动导入可能导致命名冲突，需要统一命名规范。
• 至于痛点2，大项目中自动扫描耗时可通过配置排除不必要目录来提高启动速度。
• 再看痛点3。某些第三方库不支持自动导入，需要手动引入或创建 wrapper。
` `

app.vue 与布局程序 

``

``
vue
// layouts/default.vue

// layouts/admin.vue

// pages/admin/dashboard.vue