跳至主要內容

Nuxt 3 簡介

Jia-Yin2025年5月28日大约 2 分鐘coursefrontendwebnuxt

學習內容

  • 理解 Nuxt.js 的核心概念與優勢
  • 學會安裝與設定 Nuxt.js 開發環境
  • 建立第一個 Nuxt.js 專案

參考內容1
參考內容2

什麼是 Nuxt.js？

Nuxt.js 是一個基於 Vue.js 的全端網頁框架，特別適合建立現代化、高效能的網頁應用程式。對於電機系學生來說，可以把它想像成一個「智慧型開發工具」，它自動化了許多繁瑣的設定工作，讓你能專注在功能開發上。

核心特色

1. 伺服器端渲染 (Server-Side Rendering, SSR)

  • 頁面在伺服器端先渲染好再傳送給瀏覽器
  • 優點：載入速度快、SEO 友善、對低效能裝置友善

2. 自動化與慣例

  • 基於檔案結構自動生成路由
  • 自動程式碼分割
  • 自動匯入元件和函式
  • 零設定 TypeScript 支援

3. 全端能力

  • 前端：Vue.js 元件系統
  • 後端：內建 API 路由與伺服器功能
  • 部署：支援多種部署方式（靜態、伺服器、無伺服器 serverless）

開發環境準備

必要條件

  1. Node.js

    • 版本：18.x 或更新（建議使用偶數版本：18, 20, 22）
    • 下載位置：nodejs.org

  2. 終端機

    • 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    # 專案相依性
Copyright © 2025 Jia-Yin