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://walker-learn.xyz/archives/4425
