SKILL.md
只读
名称
nuxt
描述
Nuxt 全栈 Vue 框架,支持 SSR、自动导入和基于文件的路由。用于处理 Nuxt 应用、服务端路由、useFetch、中间件或混合渲染。
Nuxt 是一个全栈 Vue 框架,提供服务端渲染、基于文件的路由、自动导入和强大的模块系统。它使用 Nitro 作为服务端引擎,支持在 Node.js、Serverless 和边缘平台进行通用部署。
该技能基于 Nuxt 4.x,生成于 2026-06-22。
Nuxt 4 注意: 默认
srcDir为app/—— Vue 应用代码(app.vue、components/、composables/、pages/等)位于app/下,而server/、shared/、public/、modules/、layers/和nuxt.config.ts保留在项目根目录。~/@别名现在指向app/;使用~~/@@指向根目录。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 目录结构 | Nuxt 4 的 app/ srcDir、shared/、别名、约定 |
core-directory-structure |
| 配置 | nuxt.config.ts、app.config.ts、别名、compatibilityVersion、experimental | core-config |
| CLI 命令 | 开发服务器、构建、生成、预览和实用命令 | core-cli |
| 路由 | 基于文件的路由、动态路由、命名视图、布局属性、中间件 | core-routing |
| 数据获取 | useFetch、useAsyncData、$fetch、createUseFetch 工厂、缓存 | core-data-fetching |
| 模块 | 创建和使用 Nuxt 模块、Nuxt Kit 工具 | core-modules |
| 部署 | 使用 Nitro 进行平台无关的部署,支持 Vercel、Netlify、Cloudflare | core-deployment |
特性
| 主题 | 描述 | 参考 |
|---|---|---|
| 组合式函数自动导入 | Vue/Nuxt 组合式函数、自定义组合式函数、shared/、useAnnouncer |
features-composables |
| 组件自动导入 | 组件命名、懒加载、水合策略 | features-components-autoimport |
| 内置组件 | NuxtLink、NuxtPage、NuxtLayout、NuxtAnnouncer、ClientOnly 等 | features-components |
| 状态管理 | useState 组合式函数、SSR 友好的状态、Pinia 集成 | features-state |
| 服务端路由 | API 路由、服务端中间件、Nitro 服务端引擎 | features-server |
渲染
| 主题 | 描述 | 参考 |
|---|---|---|
| 渲染模式 | 通用(SSR)、客户端(SPA)、混合渲染、路由规则 | rendering-modes |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| 数据获取模式 | 高效获取、缓存、并行请求、错误处理 | best-practices-data-fetching |
| SSR 与水合 | 避免上下文泄漏、水合不匹配、组合式函数模式 | best-practices-ssr |
高级
| 主题 | 描述 | 参考 |
|---|---|---|
| 层 | 使用可复用层扩展应用 | advanced-layers |
| 生命周期钩子 | 构建时、运行时和服务端钩子 | advanced-hooks |
| 模块编写 | 使用 Nuxt Kit 编写可发布模块、带键的组合式函数、依赖 | advanced-module-authoring |




