nuxt

nuxt

热门

Nuxt 全栈 Vue 框架,支持 SSR、自动导入和基于文件的路由。用于处理 Nuxt 应用、服务端路由、useFetch、中间件或混合渲染。

5367Star
304Fork
更新于 2026/6/23
SKILL.md
只读
名称
nuxt
描述

Nuxt 全栈 Vue 框架,支持 SSR、自动导入和基于文件的路由。用于处理 Nuxt 应用、服务端路由、useFetch、中间件或混合渲染。

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

该技能基于 Nuxt 4.x,生成于 2026-06-22。

Nuxt 4 注意: 默认 srcDirapp/ —— Vue 应用代码(app.vuecomponents/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