這回為了 Side Project 的開發 SEO 需要，來嘗試使用 Nuxt js 來架站並產生相關內容。這邊筆記下架設基礎環境前和過程中要留心的概念和內容。
概念和注意事項
1. 使用 npx 安裝時，若有出現 error cb.apply is not a function 錯誤。有很高的機會是在 npx 中的 graceful-fs 所導致得錯誤。你可以切換到 npx 內的 node_modules 更新它即可。
npx 的路徑會像是：~/.nvm/versions/node/vXX.XX.X/lib/node_modules/npx/node_modules/npm/node_modules/graceful-fs
2. SSR 網站在 Production 運行起來時，前端專案會跑在一個 Node.js 的伺服器上。使用者在瀏覽器輸入網址後，會需要設定 Proxy 將使用者轉發到 Node.js 的 Port ，才能正常存取。
3. 承接第二點，因為可以先由 Server 端先行載入一些內容，讓爬蟲可以較為清楚的知道該網站的內容是什麼，對 SEO 較佳。
4. 前端需使用 Node.js 當作伺服器環境，但後端的 API 並沒有一定要與前端的 Server 綁在一起。你可以在 JavaScript 網頁中利用 axios 去存取其他後端 API 的資料
5. nuxt 擁有自己的生態系。常用的知名框架和套件如：Element UI, Vuetify, Axios … 等都有出與 nuxt 整合的版本。你可以視情況使用。
6. 若你要自行撰寫 Plugins 到 Nuxt 專案中使用，需要在 nuxt.config.js 中載入，以及參考此篇文章決定你要使用哪一種的掛載方式。
安裝流程
nuxt-create-app 來產生專案是最為方便的，你需要依序決定以下事項：
- 專案名稱
- JavaScript 或是 TypeScript – 若要後者建議直接選，可以省下你不少後續開發套件相依性的問題
- 套件管理工具 – npm / yarn，看你自己的平常使用
- UI 框架選擇
- 專案模組 – 這邊建議先行裝上 Axios
- 語法檢查 – 推薦使用 Eslint
- 測試框架
- 渲染模式
- 部屬型態 -若你是選擇 Static，會需要額外處理動態路由部分 ( 因為靜態檔案無伺服器，沒有辦法對應的幫你生成路由內容 )
版本控制
程式碼
[ Github ]：https://github.com/andy922200/nuxt-vue2-typescript-template
此 Repo 會陸續更新進度
相關文章
★全文分享★ [筆記] Nuxt js 初探筆記 5 – Nuxt Generate 模式下跳轉到 Error Page
★全文分享★ [筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定
★全文分享★ [筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題
★全文分享★ [筆記] Nuxt js 初探筆記 2 – 解決 Vuex 持久化問題
