SuperAPI AI 工具集

nuxt

前端与建站

查看项目

更新于 10-16 00:29

技能介绍

用途:使用 Nuxt 3 构建 Vue 全栈应用,覆盖页面、布局、组合式函数、服务端路由与数据获取,适合需要 SSR 的 Vue 项目。

主要能力:文件式路由(含动态、捕获全部、嵌套路由)、布局、自动导入组件与组合式函数、数据获取(useFetch、useAsyncData、$fetch)、状态管理(useState)、服务端 API 路由、路由与服务端中间件、SEO 元信息(useHead、useSeoMeta)、插件、错误处理,以及按路由配置渲染模式(预渲染、ISR、仅客户端 SPA、CORS)。

使用方式:创建项目执行 npx nuxi@latest init my-app,随后 cd my-app、npm install、npm run dev。项目结构包含 app.vue、nuxt.config.ts、pages、components、composables、layouts、server、middleware、plugins、public、assets。数据获取需 await useFetch;服务端路由用 defineEventHandler,动态参数用 getRouterParam,查询用 getQuery,错误用 createError。配置在 nuxt.config.ts 中通过 defineNuxtConfig 设置 modules、runtimeConfig、app.head、routeRules。

适用场景:需要 SSR/SSG/ISR 的 Vue 应用、同项目内提供 API 的全栈项目、按路由差异化渲染的站点。

限制与注意:组合式函数只能在 setup 或其他组合式函数中调用;服务端路由无状态,不应使用 reactive;useFetch 必须 await;渲染数据前应检查 pending;环境变量应使用 runtimeConfig 而非硬编码。具体版本、收费与平台支持暂未提供。