mcpField
N
nuxt

nuxt

github.com/midudev开发7.0k61 次安装2 周前更新
代码仓库

关于 nuxt

涵盖 Nuxt 全栈 Vue 框架的开发技能,介绍其约定、API、渲染和部署,并提供 Nuxt 5 指南及路由、数据获取、模块和服务端路由模式。

主要功能

  1. 01Nuxt 项目结构与配置
  2. 02基于文件的路由和类型化路由
  3. 03数据获取与缓存指南
  4. 04组件和组合式函数自动导入
  5. 05渲染模式与服务端路由
  6. 06使用 Nitro 部署

适用场景

  1. 01构建 Nuxt 全栈应用
  2. 02实现类型化页面路由
  3. 03选择 SSR、SPA 或混合渲染
  4. 04配置数据获取与缓存

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/midudev/autoskills --skill nuxt

安装后在 Claude Code 中输入/nuxt确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

GENERATION.md
references/
advanced-hooks.md
advanced-layers.md
advanced-module-authoring.md
best-practices-data-fetching.md
best-practices-ssr.md
core-cli.md
core-config.md
core-data-fetching.md
core-deployment.md
core-directory-structure.md
core-modules.md
core-routing.md
features-components-autoimport.md
features-components.md
features-composables.md
features-server.md
features-state.md
rendering-modes.md

详细介绍

Nuxt 是一个全栈 Vue 框架,提供服务端渲染、基于文件的路由、自动导入和强大的模块系统。它使用 Nitro 作为服务器引擎,可在 Node.js、无服务器和边缘平台上通用部署。

此技能基于 Nuxt 5.x(5.0.0-0),生成于 2026-09-25。

目录布局: 默认的 srcDir 是 app/——Vue 应用代码(app.vue、components/、composables/、pages/ 等)位于 app/ 下,而 server/、shared/、public/、modules/、layers/ 和 nuxt.config.ts 保留在项目根目录。~/@ 别名指向 app/;使用 ~~/@@ 指向根目录。

Nuxt 5 注意事项: Nuxt 5 将许多此前的实验性标志设为默认值。对 Agent 影响最大的变化包括:服务器代码迁移至 Nitro v3(h3 v2、Web 标准 Request/Response),服务器工具从 nuxt/server 导入且默认不再自动导入,$fetch/useFetch 根据生成的路由类型进行类型化,路由默认区分大小写且经过类型化,打包器为 Vite 8(Rolldown)。Nuxt 5 要求 Node 22.19/24.11 及以上版本。Nitro v2 兼容层(nitroLegacy)可在迁移期间继续构建旧版服务器代码。详情请参阅各个参考文档。

核心

主题描述参考
目录结构Nuxt 4 的 app/ srcDir、shared/、别名和约定core-directory-structure
配置nuxt.config.ts、app.config.ts、别名、Nuxt 5 默认值、移除 jiti、实验性功能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

功能

主题描述参考
Composables 自动导入Vue/Nuxt composables、自定义 composables、shared/、useAnnouncerfeatures-composables
组件自动导入组件命名、延迟加载、水合策略features-components-autoimport
内置组件NuxtLink、NuxtPage、NuxtLayout、NuxtAnnouncer、ClientOnly 等features-components
状态管理useState composable、支持 SSR 的状态、Pinia 集成features-state
服务端路由API 路由、nuxt/server 导入、Nitro v3(h3 v2)、会话、中间件features-server

渲染

主题描述参考
渲染模式通用(SSR)、客户端(SPA)、混合渲染、路由规则rendering-modes

最佳实践

主题描述参考
数据获取模式高效获取、缓存、并行请求、错误处理best-practices-data-fetching
SSR 与水合避免上下文泄漏、水合不匹配、composable 模式best-practices-ssr

高级

主题描述参考
层使用可复用的层扩展应用advanced-layers
生命周期钩子构建时、运行时和服务钩子advanced-hooks
模块编写使用 Nuxt Kit、带键的组合式函数和依赖项构建可发布的模块advanced-module-authoring

评论

支持 Markdown