Nuxt 是一个全栈 Vue 框架,提供服务器端渲染(SSR)、基于文件的路由、自动导入和强大的模块系统。它使用 Nitro 作为服务端引擎,可在 Node.js、无服务器和边缘平台上进行通用部署。
本技能基于 Nuxt 3.x,生成于 2026-01-28。
核心主题
- 目录结构:项目文件夹结构、约定、文件组织(参考 core-directory-structure)。
- 配置:nuxt.config.ts、app.config.ts、运行时配置、环境变量(参考 core-config)。
- CLI 命令:开发服务器、构建、生成、预览及实用命令(参考 core-cli)。
- 路由:基于文件的路由、动态路由、导航、中间件、布局(参考 core-routing)。
- 数据获取:useFetch、useAsyncData、$fetch、缓存、刷新(参考 core-data-fetching)。
- 模块:创建和使用 Nuxt 模块、Nuxt Kit 工具(参考 core-modules)。
- 部署:使用 Nitro 进行平台无关部署,支持 Vercel、Netlify、Cloudflare(参考 core-deployment)。
功能特性
- 组合式函数自动导入:Vue API、Nuxt 组合式函数、自定义组合式函数、工具函数(参考 features-composables)。
- 组件自动导入:组件命名、懒加载、水合策略(参考 features-components-autoimport)。
- 内置组件:NuxtLink、NuxtPage、NuxtLayout、ClientOnly 等(参考 features-components)。
- 状态管理:useState 组合式函数、SSR 友好状态、Pinia 集成(参考 features-state)。
- 服务端路由:API 路由、服务端中间件、Nitro 服务端引擎(参考 features-server)。
渲染
- 渲染模式:通用(SSR)、客户端(SPA)、混合渲染、路由规则(参考 rendering-modes)。
最佳实践
- 数据获取模式:高效获取、缓存、并行请求、错误处理(参考 best-practices-data-fetching)。
- SSR 与水合:避免上下文泄漏、水合不匹配、组合式函数模式(参考 best-practices-ssr)。
进阶
- Layers:使用可复用 Layers 扩展应用(参考 advanced-layers)。
- 生命周期钩子:构建时、运行时和服务端钩子(参考 advanced-hooks)。
- 模块编写:使用 Nuxt Kit 创建可发布的 Nuxt 模块(参考 advanced-module-authoring)。
适用场景:开发 Nuxt 应用、服务端路由、useFetch、中间件或混合渲染等工作。
限制:资料未提供具体的收费、价格、平台支持细节或使用步骤,相关事实暂未提供。