Nuxt3 全栈开发实战

admin

2025-11-23 05:21 阅读 987

Nuxt3框架开发SSR应用的完整教程，包含路由、状态管理、API集成等

Nuxt3 全栈开发实战

Nuxt3 是基于 Vue3 的全栈框架，提供服务端渲染、静态生成和混合渲染能力。

1. 项目创建

npx nuxi init my-app
cd my-app
pnpm install
pnpm dev

2. 目录结构

├── pages/          # 页面路由
├── components/     # 组件（自动导入）
├── composables/    # 组合式函数
├── server/         # 服务端 API
├── public/         # 静态资源
└── nuxt.config.ts  # 配置文件

3. 页面路由

// pages/index.vue - 首页 /
// pages/about.vue - /about
// pages/users/[id].vue - /users/:id
// pages/posts/[...slug].vue - 捕获所有

<script setup> const route = useRoute() console.log(route.params.id) </script>

4. 数据获取

<script setup>
// 服务端+客户端获取
const { data, pending, error } = await useFetch("/api/posts")

// 仅服务端获取 const { data } = await useAsyncData(“posts”, () => { return $fetch(“/api/posts”) })

// 懒加载 const { data, pending } = useLazyFetch(“/api/posts”) </script>

5. 服务端 API

// server/api/hello.ts
export default defineEventHandler((event) => {
  return { message: "Hello World" }
})

// server/api/users/[id].ts export default defineEventHandler((event) => { const id = getRouterParam(event, “id”) return { id, name: “User” } })

6. 状态管理

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState("counter", () => 0)
  const increment = () => count.value++
  return { count, increment }
}

7. SEO 优化

<script setup>
useHead({
  title: "页面标题",
  meta: [
    { name: "description", content: "页面描述" }
  ]
})

useSeoMeta({ ogTitle: “Open Graph 标题”, ogImage: “/og-image.png” }) </script>

8. 部署

# 生成静态站点
pnpm generate

`Node.js 服务端`

pnpm build node .output/server/index.mjs