身為前端工程師開發網頁，程式碼編輯器肯定必不可少，在這個系列將會使用 VS Code 進行開發，不過呢，也並沒有說一定非得使用 VS Code，所以說不論你是 Vim 派、VS Code 抑或是使用 WebStorm，自己用的順手最重要。接下來我將帶你開始建立 Nuxt 3 的專案。
如果你還在觀望或是從隔壁棚過來的，還不想安裝相關工具與環境，那麼可以點擊下面其一連結，在 StackBlitza 或 CodeSandbox 的線上編輯器環境稍微玩玩，直接線上體驗 Nuxt 3。
開始之前，依照 Nuxt 3 官網的起手式我們有幾個項目需要做一下檢查，我們這裡僅先注意一下 Node.js 的版本，建議使用目前最新 LTS 版本 v16.17.0 (包含 NPM v8.15.0)。
nuxi 全名為 Nuxt Command Line Interface，是由 Nuxt 提供開發的標準工具，Nuxt CLI 就像是 Vue CLI 可以建立 Vue 專案，我們當然也就可以使用 Nuxt CLI 來建立 Nuxt 的專案。
首先，打開終端機 (Terminal)，將目錄切換至自己習慣的工作區，接著輸入如下的 nuxi 提供指令並執行，來初始化建立一個 Nuxt 3 專案。在此，我們的專案名為 nuxt-app。
npx nuxi init nuxt-app
如下圖，npx 會詢問你是否安裝最新版本的套件 nuxi@3.0.0-rc.10 輸入 y 即可。
執行完指令後直到出現如下提示，代表專案已經初始建立成功，完成後可以發現目前目錄下多了一個名為 nuxt-app 的資料夾，這個資料夾也就是 Nuxt 3 專案的根目錄。
接下來，我們可以進入專案目錄 nuxt-app。
cd nuxt-app
在 nuxt-app 專案目錄下可以看到熟悉的 package.json，我們就可以開始安裝 Nuxt 3 專案的相關依賴套件。
npm install
Nuxt CLI 如同 Vue CLI 已經在建立專案時幫我們初始完成許多事情，再安裝完相關依賴套件後輸入下列指令，我們就可以在開發環境下啟動 Nuxt 了。
npm run dev -- -o
如果沒有意外，可以看到 Nitro 幫我們啟動了 Nuxt 3 的服務。
根據提示，我們可以在瀏覽器輸入網址 http://localhost:3000/ 看看服務是否正常運作。
如果看到如下圖的歡迎畫面，恭喜你！我們已經成功建立第一個 Nuxt 3 專案囉！
現在你可以嘗試打開在專案目錄下的 app.vue 檔案之中，app.vue 是我們 Nuxt 專案的進入點，它的內容如下：
<template>
<div>
<NuxtWelcome />
</div>
</template>
可以發現它與 Vue 3 的單一元件檔 (Single File Component, SFC) 相比，好像少了點什麼，怎麼有用了 <NuxtWelcome /> 卻沒看見在哪邊 import 的呢？
其實呢，<NuxtWelcome /> 這個元件就是我們前面瀏覽器看到的歡迎畫面，是 Nuxt 框架自帶的一個元件，而且 Nuxt 自動導入元件的更是其特色之一，後面的系列我們會再提到自動導入 (Auto Imports)。
在這裡直接移除 <NuxtWelcome /> 就可以了，我們將 app.vue 調整如下，並保存檔案。
<template>
<div>
<h1>2022 iThome 鐵人賽</h1>
</div>
</template>
可以看見因為 Nuxt 預設 Vite 建構並支援 HMR (Hot Module Replacement)，我們可以在瀏覽器快速的看見修改後的結果。
至此，大家就可以先簡單的玩玩 Nuxt 3，接下來我將補充一些 nuxi 的指令與參數簡介。
以下將簡單介紹一些常用的指令，若您在專案目錄下記得使用 npx 來執行 nuxi。
另外在此提醒，下面所列的指令部分參數會進行省略，若有興趣翻翻完整的指令與參數說明，可以參考 Nuxt 3 官方文件
npx nuxi init|create [dir]
這個 nuxi init 指令是用來初始化一個 Nuxt 專案，等價 nuxi create 指令，dir 你可以填字串作為專案與資料夾名稱，也可以填寫完整路徑來建立專案目錄。
npx nuxi dev [--open, -o] [--port, -p]
當我們在本地端進行開發時，需要運行開發環境，當我們執行 npm run dev -- -o 時，依據 package.json 中的 scripts 所列，其實就是在執行 nuxi dev -o，其中的 -o 表示服務啟動後開啟瀏覽器。
如果啟動服務發現 Port 衝突，你也可以透過 -p 來將預設的監聽的 Port: 3000 調整為其他數值。
e.g. nuxi dev -p 3001 或 npm run dev -- -o -p 3001
npx nuxi clean|cleanup
nuxi clean 等價 nuxi cleanup 指令，用來刪除 Nuxt 自動產生的檔案和緩存包括：
npx nuxi upgrade [--force|-f]
這個指令可以用來將目前專案的 Nuxt 3 升級至最新的版本，如果有一些可能行為調整或不相容的情況，可以再依據實際情境搭配 -f 參數來強制更新。
如下圖，只要一行指令 npx nuxi upgrade 就可以將專案版本由 3.0.0-rc.9 升級至 3.0.0-rc.10，在 RC 階段或之後想定期升級版本來說非常好用，但也請記得升級前可以先看一下官方的 Changelog。
這篇主要介紹了如何建立 Nuxt 3 專案與 Nuxt CLI 常用指令，所謂「工欲善其事，必先利其器」，在我們開始深入介紹 Nuxt 3 前，會先帶領大家把環境建置完善，雖然接下來需要多花一點篇幅來介紹配置，但是這些配置都將有利於開發 Nuxt 。
感謝大家的閱讀，這是我第一次參加 iThome 鐵人賽，請鞭小力一些，也歡迎大家給予建議 ：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。
iThome鐵人賽
看影片追技術