[筆記] Nuxt js 初探筆記 1 – 基礎環境建置

這回為了 Side Project 的開發 SEO 需要,來嘗試使用 Nuxt js 來架站並產生相關內容。這邊筆記下架設基礎環境前和過程中要留心的概念和內容。
nuxt-js-logo


概念和注意事項

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 初探筆記 5 – Nuxt Generate 模式下跳轉到 Error Page
Nuxt js 之所以被採用作為前端框架的選項之一,很大一部分就是為了讓搜尋引擎的爬蟲能夠認得網頁。這邊筆記下當你使用 Nuxt Generate 模式生成靜態網頁時,那要如何跳轉到共同的 Error Page 模板上。
★全文分享★  [筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定
[筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定
Nuxt js 之所以被採用作為前端框架的選項之一,很大一部分就是為了讓搜尋引擎的爬蟲能夠認得網頁。這邊筆記下一些與 SEO 相關的設定項目,會從多頁共用的 global 設定到單一頁面的設定來提供處
★全文分享★  [筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題
[筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題
當運用 Nuxt 開發若要產生靜態頁面,其概念類似於快照 ( snapshot ) 一份當下與 server-side 的互動結果。這個網頁被靜態託管的站點 ( 如 Netlify、Amazon S3 … 等 ) 讀取時,跟 SPA 網站相比,其 header 和運用
★全文分享★  [筆記] Nuxt js 初探筆記 2 – 解決 Vuex 持久化問題
[筆記] Nuxt js 初探筆記 2 – 解決 Vuex 持久化問題
這回為了 Side Project 的開發 SEO 需要,來嘗試使用 Nuxt js 來架站並產生相關內容。這邊筆記下如何維持 Vuex 的狀態一致。概念和注意事項1. SSR 在 Server 端執行時,是沒辦法取得 window 的值。( 畢竟根本

Reference

1. 建立Nuxt.js專案初體驗

按讚加入粉絲團

延伸閱讀