Walker World
← 返回
前端开发 2025.04.06

Nuxt3_掃盲 入門與原理介紹【學習筆記】

前端开发

目錄

Nuxt 3 入門與原理介紹

💡 什麼是 Nuxt 3？

Nuxt 3 是基於 Vue 3 和 Vite 打造的全端前端框架，支援：

  • 伺服器端渲染（SSR）
  • 靜態網站生成（SSG）
  • 單頁應用程式（SPA）
  • 建構全端應用程式（支援 API）

Nuxt 3 是 Vue 的「加強版」，幫你簡化專案結構和開發流程。

🔧 核心原理

功能Nuxt 如何處理
✅ 頁面路由自動根據 pages/ 目錄結構生成
✅ 元件自動引入自動註冊 components/ 中的元件
✅ SSR / SSG / SPA內建支援，透過指令或配置切換
✅ API 介面支援在 server/api/ 寫後端邏輯
✅ 狀態管理推薦使用 pinia（Vue 官方狀態庫）
✅ 建構效能預設使用 Vite（建構快）或切換 Webpack
✅ TypeScript原生支援

🚀 快速入門

1. 建立專案

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

2. 目錄結構

my-nuxt-app/
├── pages/             # 頁面目錄（自動成為路由）
├── components/        # 元件目錄（自動引入）
├── layouts/           # 版面配置頁面
├── app.vue            # 全域入口檔案
├── nuxt.config.ts     # 配置檔案
├── server/api/        # 後端介面目錄（建構全端）

✏️ 範例程式碼

頁面：pages/index.vue

<template>
  <h1>欢迎来到 Nuxt 3</h1>
</template>

造訪 http://localhost:3000 查看效果。

API 介面：server/api/hello.ts

export default defineEventHandler(() => {
  return { message: '你好 Nuxt API' }
})

介面造訪位址：http://localhost:3000/api/hello

回傳結果：

{ "message": "你好 Nuxt API" }

客戶端呼叫介面

const { data } = await useFetch('/api/hello')

✅ Nuxt 3 適合人群

  • 使用 Vue，但不想手動配置建構、路由、SSR 的開發者
  • 希望建構高效能、SEO 友善的網站/應用程式
  • 想一套程式碼做前端 + 後端 API 的開發者

📚 推薦學習資源