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 專案!