Nuxt 3 簡介
2025年5月28日大约 2 分鐘
學習內容
- 理解 Nuxt.js 的核心概念與優勢
- 學會安裝與設定 Nuxt.js 開發環境
- 建立第一個 Nuxt.js 專案
什麼是 Nuxt.js?
Nuxt.js 是一個基於 Vue.js 的全端網頁框架,特別適合建立現代化、高效能的網頁應用程式。對於電機系學生來說,可以把它想像成一個「智慧型開發工具」,它自動化了許多繁瑣的設定工作,讓你能專注在功能開發上。
核心特色
1. 伺服器端渲染 (Server-Side Rendering, SSR)
- 頁面在伺服器端先渲染好再傳送給瀏覽器
- 優點:載入速度快、SEO 友善、對低效能裝置友善
2. 自動化與慣例
- 基於檔案結構自動生成路由
- 自動程式碼分割
- 自動匯入元件和函式
- 零設定 TypeScript 支援
3. 全端能力
- 前端:Vue.js 元件系統
- 後端:內建 API 路由與伺服器功能
- 部署:支援多種部署方式(靜態、伺服器、無伺服器 serverless)
開發環境準備
必要條件
Node.js
- 版本:18.x 或更新(建議使用偶數版本:18, 20, 22)
- 下載位置:nodejs.org
終端機
- Windows:命令提示字元或 PowerShell
- macOS/Linux:Terminal
環境檢查
打開終端機,執行以下指令確認環境:
# 檢查 Node.js 版本
node --version
# 檢查 npm 版本
npm --version
# 如果版本號正常顯示,代表環境準備完成
建立第一個 Nuxt.js 專案
步驟 1:建立專案
在終端機中執行以下指令:
# 使用 npm 建立專案(擇一執行)
npm create nuxt my-nuxt-app
# 或使用 yarn
yarn create nuxt my-nuxt-app
# 或使用 pnpm
pnpm create nuxt my-nuxt-app
步驟 2:進入專案目錄
cd my-nuxt-app
步驟 3:安裝相依套件
npm install
步驟 4:啟動開發伺服器
# 啟動開發伺服器並自動開啟瀏覽器
npm run dev -- -o
# 或者
npm run dev
成功啟動後,你會看到類似以下的訊息:
✨ Nuxt DevTools enabled, open http://localhost:3000 in your browser
Local: http://localhost:3000/
Network: http://192.168.1.100:3000/
Nuxt.js 專案結構解析
Nuxt.js 專案常見的目錄結構:
my-nuxt-app/
├── .nuxt/ # 自動生成的建置檔案(不需手動修改)
├── assets/ # 未編譯的資源檔(圖片、樣式、字型)
├── components/ # Vue 元件目錄
├── layouts/ # 版面配置檔案
├── middleware/ # 中間件(路由守衛)
├── pages/ # 頁面檔案(自動生成路由)
├── plugins/ # 外掛程式
├── public/ # 靜態檔案(直接服務)
├── server/ # 伺服器端 API
├── utils/ # 工具函式
├── app.vue # 根元件
├── nuxt.config.ts # Nuxt 設定檔
└── package.json # 專案相依性