[Day 01] 建立第一個 Nuxt 3 專案 - 嘗試 30 日寫文充版挑戰

前言

• Nuxt 3 is a Hybrid Vue Framework
• Nuxt 3 was released on October 12, 2021

這個部落格算是第一次接觸 nuxtJS 與第二次接觸 Vue 的作品，而 nuxtJS 採用的則是 nuxt2 (2.15.8) 的版本。 在開始學習 Nuxt 3 以後，只有一個感想，就是...

我的天阿 !!! 怎麼可以那麼好用 !?!?

雖然最顯著的區別是 Nuxt 3 已完全用 Typescript 重寫，這無疑將提供改進的維護和 Typescript 支持。 而且也要順便學習 Typescript 的寫法是如何撰寫的，但是一堆設定都可以不用在 nuxt.config.js 這一點來看，完勝阿!!!

雖然 Nuxt 3 也是可以採 Javascript 進行開發，但選擇預設的 Typescript 還是最好的選擇，因為目前 Typescript 愈發流行，越來越多的系統、項目和框架都採用 Typescript 進行開發，且靜態類型系統有助於防止許多潛在的運行時錯誤。

本文將介紹 Nuxt 3 安裝過程以及指令，從根本上來看，Nuxt 3 是對 NuxtJS 框架的完全重寫，與其前身有許多不同之處。

Nuxt 3 已經不僅僅是一個靜態站點生成器 (SSG)，它現在幫助開發人員實現功能齊全的 Client 端/ Server端應用程序，並提供決定每個頁面呈現策略的能力，在構建 Web 應用程序而無需擔心更精細的細節，Nuxt 3 的目標是使 Web 開發健壯且高效，同時提供出色的開發人員體驗。

如何使用 Nuxt 3 開始第一個專案

請注意，Nuxt 3 僅支持 Node 版本 14 或 16。

Prerequisites - 先決條件

要開始進行 Nuxt 3 之前必備的當然就是 Node.js，而開發應用程式是熟悉的 Visual Studio Code，VSCode 擴展套件的話則是安裝 Vue Language Features (Volar)，最重要的還是對 Javascript 有一定的認知。

Vue Language Features (Volar) 是為 Vue、Vitepress 和 petite-vue 構建的語言支持擴展。這是基於 @vue/reactivity 按需計算一切，實現原生 TypeScript 語言服務級別的性能。

Starting a new project - 建立新專案

打開終端機或是直接使用 VSCode 終端並輸入以下指令： (name-of-your-nuxt-project 是項目名稱)

$ npx nuxi init name-of-your-nuxt-project

完成後再進入創建好的項目，Nuxt 3 很貼心的會提醒你如何進入並執行它。

// 進入創建好的專案目錄
cd name-of-your-nuxt-project

Installing dependencies - 安裝項目依賴項

當前 Nuxt 3 並不會自動安裝項目依賴項，但可以自行安裝自己所習慣的 Nuxt 3 專案的相關依賴套件。

// 安裝項目依賴項
npm install
# or
yarn install
# or
pnpm install

Starting development server - 啟動本地開發服務器

Nuxt CLI 如同 Vue CLI 已經在建立專案時就自動建立各種必需品，所以只需要安裝完依賴套件後，輸入下方指令就可以啟動本地開發服務器了！

// 啟動本地開發服務器
npm run dev
# or
yarn dev
# or
pnpm run dev

如果一切正常，開發服務器將可以複製出現的連結在瀏覽器中打開它以查看正在運行的 Nuxt 3 專案。

而如果想要啟動本地開發服務器的同時，自動開啟瀏覽器的話可以改成輸入下方指令：

// 啟動本地開發服務器
yarn dev -o

或是假設一開始是再電腦終端機進行建立的也可以輸入下方指令，開啟 VSCode 進行：

$ code .

Nuxt 3 特點

輸入完 yarn dev -o 後，看終端會發現出現了 Nuxt 3.x.x with Nitro 2.1.2 ，代表 Nitro 幫忙啟動了 Nuxt 3 的服務。

而 Nitro 伺服器引擎 (Server Engine) 就是 Nuxt 3 最主要的特點，它基於 rollup 與 h3，為達高效能與可移植性目標而建構的最小 HTTP 框架。

Nitro Engine 特色功能

• 跨平台支持
• API 路由，可直接開發由後端處理的邏輯或者與資料庫互動，再將結果回傳至前端，實作出 Server API
• 開箱即用的伺服器載入 - 無需任何配置
• 基於檔案系統的路由 - 只需專注在建立伺服器的檔案系統
• 自動程式碼拆分 (code-splitting) 與異步加載 chunk (async-loaded chunks) - 不再需要 node_modules
• 混合渲染模式 - 供靜態頁面與無伺服器 (Serverless) 來配置
• 可透過 server 目錄來建置具有後端處理以及 hot module reloading 支援的 Server API

Nuxt CLI 常用指令

npx nuxi dev|build|build-module|cleanup|clean|preview|start|analyze|generate|prepare|typecheck|usage|info|init|create|upgrade|test|add|new

nuxi init ：初始化一個 Nuxt 專案，name-of-your-nuxt-project 為自訂專案資料夾名稱，也可以輸入完整路徑與名稱建立專案目錄。

$ npx nuxi init name-of-your-nuxt-project

nuxi create ：同理於 nuxi init 。

$ npx nuxi create name-of-your-nuxt-project

nuxi dev ：運行本地端開發環境。

// [--open, -o] 擇一表示自動開啟瀏覽器
// [--port, -p] 擇一將預設監聽的 Port: 3000 調整為其它數值

$ npx nuxi dev [--open, -o] [--port, -p]

# e.g. npm run dev -- -o -p 7777
# e.g. yarn dev -o
# e.g. nuxi dev -p 7777

nuxi upgrade ：升級至最新的版本。(升級前應看一下官方更新內容)

// 依據實際情境(相容性或可能性行為)搭配 -f 參數來強制更新
$ npx nuxi upgrade [--force, -f]