开发 Nuxt 4（全栈 Vue/SSR）应用时…

当你在 Nuxt 项目中做 SSR、文件路由、useFetch、中间件、服务端路由或混合渲染时，按主题索引查阅对应参考文档并遵循 Nuxt 4 的目录与别名约定。

适用场景

解决思路

1. 确认技术栈与版本：Nuxt 是基于 Vue 的全栈框架，提供服务端渲染（SSR）、基于文件的路由、自动导入和模块系统，并使用 Nitro 作为服务端引擎，可部署到 Node.js、serverless 和 edge 平台；本技能基于 Nuxt 4.x（生成于 2026-06-22）。
2. 遵循 Nuxt 4 目录约定：默认 srcDir 是 app/，Vue 应用代码（app.vue、components/、composables/、pages/ 等）放在 app/ 下，而 server/、shared/、public/、modules/、layers/ 和 nuxt.config.ts 保留在项目根目录。
3. 处理别名：~ 和 @ 现在指向 app/；要引用项目根目录请使用 ~~ 和 @@。
4. 目录结构与约定（app/ srcDir、shared/、别名、约定）查阅 references/core-directory-structure.md。
5. 配置（nuxt.config.ts、app.config.ts、别名、compatibilityVersion、experimental）查阅 references/core-config.md。
6. CLI 命令（开发服务器、build、generate、preview 及实用命令）查阅 references/core-cli.md。
7. 路由（基于文件的路由、动态路由、命名视图、layout props、中间件）查阅 references/core-routing.md。
8. 数据获取（useFetch、useAsyncData、$fetch、createUseFetch 工厂、缓存）查阅 references/core-data-fetching.md。
9. 模块的创建与使用（Nuxt 模块、Nuxt Kit 工具函数）查阅 references/core-modules.md。
10. 部署（用 Nitro 做平台无关部署，Vercel、Netlify、Cloudflare）查阅 references/core-deployment.md。
11. Composables 自动导入（Vue/Nuxt composables、自定义 composables、shared/、useAnnouncer）查阅 references/features-composables.md。
12. 组件自动导入（组件命名、懒加载、hydration 策略）查阅 references/features-components-autoimport.md。
13. 内置组件（NuxtLink、NuxtPage、NuxtLayout、NuxtAnnouncer、ClientOnly 等）查阅 references/features-components.md。
14. 状态管理（useState composable、SSR 友好状态、Pinia 集成）查阅 references/features-state.md。
15. 服务端路由（API routes、server middleware、Nitro 服务端引擎）查阅 references/features-server.md。
16. 渲染模式（Universal/SSR、客户端 SPA、混合渲染、route rules）查阅 references/rendering-modes.md。
17. 数据获取最佳实践（高效获取、缓存、并行请求、错误处理）查阅 references/best-practices-data-fetching.md。
18. SSR 与 hydration 最佳实践（避免 context 泄漏、hydration 不匹配、composable 模式）查阅 references/best-practices-ssr.md。
19. Layers（用可复用的 layers 扩展应用）查阅 references/advanced-layers.md。
20. 生命周期钩子（构建时、运行时和服务端 hooks）查阅 references/advanced-hooks.md。
21. 模块编写（用 Nuxt Kit 发布可分发模块、keyed composables、依赖管理）查阅 references/advanced-module-authoring.md。

适用边界 · 注意事项

• 项目不是 Nuxt/Vue 技术栈（如纯 Vue 3 + Vite 的 SPA、React、Svelte）时，本技能的目录约定与 API 不适用。
• 使用 Nuxt 3.x 或更早版本时，默认 srcDir 与 ~/@ 别名指向根目录，与本文的 Nuxt 4 约定不同。
• 只想了解通用前端工程实践、不需要 SSR/服务端渲染能力时，无需引入本技能这些 Nuxt 专有机制。