SuperAPI AI 工具集

nuxt

前端与建站

查看项目

更新于 10-15 08:12

技能介绍

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、中间件或混合渲染等工作。

限制:资料未提供具体的收费、价格、平台支持细节或使用步骤,相关事实暂未提供。