基礎知識

Nuxt3 是基於 Vue3，兼具前後端環境的 Framework，因為有後端，所以可以使用 SSR 來優化網站的 SEO，本系列文章會針對 Nuxt3 和相關套件的使用來撰寫，不會針對 Vue 基礎的操作再額外說明，建議已經有下列相關的知識，會比較容易理解：

• Vue3 (Setup、Composition API)、Vue-Router、Pinia
• CSR、SSR、SSG
• SEO
• 前後端運作流程基本概念

前言

Nuxt3 還在發展中，尚未進入穩定版本，所以頻繁更新，開始報名鐵人賽時版本大概是 RC8，開始挑戰的現在是 RC10，本系列文章會先依據 RC10 版本的使用狀況來撰寫。（很有可能完賽時就來到 RC12 版了？）

雖然 Nuxt3 還不穩定、文件也還不完整，但是 Vue 生態相關的官方文件都非常用心撰寫，只要對英文不恐懼，都可以透過閱讀 官方文件 了解基礎的使用方式，本系列主要也會依照官方文件來說明。

建置 Nuxt 專案

• 環境要求：Node.js 14.16 或 16.11 以上。
• 開始建置：
  • 下列指令的 project-name 請更換為自己要使用的專案資料夾名稱。
  • 指令執行完可以到 package.json 確認 dependencies 是不是最新版本。

$ npx nuxi init project-name

• 切換到專案資料夾。

$ cd project-name

• 安裝套件，建議使用 npm 或 yarn。

$ npm install
or
$ yarn install

pnpm 使用者踩坑注意
在官方文件的 安裝 中看似有支援 pnpm，但是仔細看 pnpm 的指令 pnpm install --shamefully-hoist，會發現 shamefully(羞恥!?) 的參數，查找了 pnpm 的 說明文件可以知道，加了這個參數後 pnpm 就會使用像 npm 或是 yarn 的方式安裝套件，等同於完全沒發揮 pnpm 的特色，如果硬是要使用其實沒什麼問題，但是我在包成 docker 的時候就會出錯，嘗試了很久都沒法解決，最後乖乖用 npm 就完事了。

• 套件順利安裝完成後就可以執行指令看看精美的初始頁面囉。

npm run dev

參考資料：
Nuxt3 官方文件