今天將開始建置專案並說明相關指令，若還沒讀過 Day2 – Nuxt 3 核心功能概念（上）、Day3 – Nuxt 3 核心功能概念（下）的朋友們也別忘了在實作前先認識這些重要的觀念！

Nuxt 3 環境需求:

• Node.js
  須使用 16.10.0 以上的版本。
• IDE
  官方推薦使用 Visual Studio Code
  搭配 Volar Extension => 提供 Vue 語法文字 highlight、快速跳轉到元件...等功能。
  ⚠️ 注意：Vue 2 推薦使用 Vetur，但有些功能會跟 Volar 衝突，記得先關閉 Vetur。
• Terminal
  建立或執行專案時需使用指令。
• Package manager
  官方範例使用 npm、pnpm、bun 套件管理工具，本次鐵人賽會用 pnpm 示範。

本次鐵人賽使用的環境為

• system：Windows
• IDE：Vistual Studio Code
• Terminal：PowerShell
• node：18.18.0
• pnpm：8.6.12
• nuxt：3.7.3
• nuxi：3.8.4

nuxi

• 由 Nuxt 提供的 CLI 工具
• 常見的指令
  • nuxi init：輕鬆建立一個完整的nuxt專案
  • nuxi dev：執行 hot module replacement 的開發環境，HMR 優點：
    • 修改程式碼，即時更新畫面
    • 部分更新，不需要重新載入整個頁面
  • nuxi build：建置專案
  • nuxi info：查看專案的相關資訊
    

建立步驟

Step 1 建立專案

> pnpm dlx nuxi@latest init <project-name>

語法解釋

• pnpm dlx－從套件庫取得套件，但不安裝指定套件為依附套件，而是直接載入並執行其提供的預設檔案
• nuxi@latest－取得 nuxi 最新版本
• init－執行 nuxi 的 init 指令
• <project-name>－專案名稱

跳出詢問專案使用的套件管理工具(會產生對應的套件明細檔案)
推薦使用 pnpm 或 bun，實測安裝初始化套件的速度相較 npm 及 yarn 皆超過一分鐘，pnpm 及 bun 則不超過30秒。

• npm => package-lock.json
• pnpm => pnpm-lock.yaml
• yarn => yarn.lock
• bun => bun.lockb（不支援 Windows 系統）

Step 2 專案建立完成

專案建立且初始化（套件安裝）完成。

Step 3 執行開發環境

> cd nuxt-project 
> pnpm run dev 

語法解釋

• cd nuxt-project－改變目前工作目錄至 nuxt-project。
• pnpm run dev－執行 nuxt 專案 -o 則可以自動開啟執行的 url。

執行結果

預設網址為 http://127.0.0.1:3000/，畫面為 app.vue 裡的 <NuxtWelcome /> 元件。

// app.vue
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

其他狀況

如果 3000 已被使用，則會自動建立其他 port，此處為 3001。

🌞 Upcoming

今天帶大家一起建立了 Nuxt 3 專案，明天將深入探討專案的資料結構，帶來更多實用的檔案資訊。

參考資料

Nuxt Installation
Nuxt API