02
Re:Nuxt 100 天練習曲
Day 2

建立你的第一個 Nuxt 專案

Day 2·專案建立·實戰練習

昨天我們認識了 Nuxt 的美好,今天就來動手玩玩看吧!過程非常簡單,只要幾個指令就能搞定。

Step 1: 事前準備

在開始前,請先確認電腦裡有這兩樣工具:

Node.js: 確保版本是 20.x 或更新。

VS Code: 建議安裝官方的 Vue (Volar) 擴充功能,寫起程式會更順手。

Step 2: 建立專案

打開你的終端機(在 VS Code 裡按 Ctrl + ~ 就能叫出來),然後貼上這個指令:

Terminal
npm create nuxt@latest my-nuxt-app

提示:你可以把 my-nuxt-app 換成任何你喜歡的專案名稱。

指令跑完後,你的專案就建好了!

Step 3: 啟動專案

接著,讓我們進入專案資料夾,把它發動起來:

Terminal
# 進入專案資料夾
cd my-nuxt-app

# 啟動開發模式
npm run dev -- -o

今日成就解鎖!

你的瀏覽器應該會自動打開 http://localhost:3000 這個網址,並顯示歡迎畫面。

看到了嗎?恭喜你,這就是你的第一個 Nuxt 網站!今天就到這裡,好好享受這個成功的瞬間吧。

成就達成:建立第一個 Nuxt 專案!