前兩天我們介紹了關於 Vue 的一些基本知識，今天我們要來介紹的是 Vue 這個框架的框架：Nuxt.js(Vue2)
透過 Nuxt.js 的幫助，我們能夠省去不少開發上的繁瑣程序：根據資料夾結構而產生的路徑設定（無須安裝 Vue Router）、使用 SSR 的方式取得資料、在 SSR 與 CSR 之間做切換、可直接用 Nuxt 的方式來設定 meta-tag（無須安裝 vue-meta）、引入元件時會自動的幫你寫好引入的路徑...等等。
前兩天我們介紹了關於 Vue 的一些基本知識（抱歉我還沒補...），今天我們要來介紹的是 Vue 這個框架的框架：Nuxt.js(Vue2)
透過 Nuxt.js 的幫助，我們能夠省去不少開發上的繁瑣程序：根據資料夾結構而產生的路徑設定（無須安裝 Vue Router）、使用 SSR 的方式取得資料、在 SSR 與 CSR 之間做切換、可直接用 Nuxt 的方式來設定 meta-tag（無須安裝 vue-meta）、引入元件時會自動的幫你寫好引入的路徑...等等。

安裝

跟著官網的教學輸入yarn create nuxt-app ithome2022-github-nuxt2 的時候出現了這個錯誤訊息跟我們說 node.js 的版本過舊，目前是 v14.18.1，而他要求至少得到 v14.20.1

先輸入 nvm -current 確認現在的版本：

確認沒有被錯殺後看看目前有安裝了哪些 node 的版本（nvm -list or nvm -ls）：

可以看到還有另一個版本也透過 nvm 在這個電腦上安裝了，事不宜遲我們先切過去（nvm use v16.17.0）

到這邊想說總算可以安裝了，按了幾次的方向鍵上之後卻出現我沒有安裝 yarn 的警告：

這是因為 nvm 在切換的時候是切資料夾，所以切過去後自然就不會有先前在舊版本的時候所安裝的東西，也就是 node_modules 並不相同。
我們可以用 npm 來下載 yarn：npm install -g yarn
之後再輸入一次 yarn create nuxt-app ithome2022-github-nuxt2 就可以成功安裝了！

安裝告一個段落後會出現專案資訊設定的步驟：

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in ithome2022-github-nuxt2
? Project name: ithome2022-github-nuxt2
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, StyleLint, Commitlint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript), Semantic Pull Requests
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? GithubUserName
? Version control system: Git

在安裝完成後我們可以到 package.json 看到 scripts 裡的指令中有 "dev": "nuxt"，在終端機輸入 yarn dev 後可以得到：

點擊裡面的網址：http://localhost:3000/ 就可以看到我們這次安裝後的初始畫面了！

參考

NuxtJS official site
NuxtJS Github