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 的開發者
📚 推薦學習資源
- 中文官網：https://nuxt.com.cn
- 官方文件：https://nuxt.com
- 影片課程：B 站搜尋「Nuxt3 入門」
主題測試文章，只做測試使用。發佈者：Walker，轉轉請注明出處：https://www.walker-learn.xyz/archives/4425
