前言

寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理，供日後參考。順序也許跟官網不太一樣，請多多包涵。

官方範例其實已涵蓋的大量情境，若是你想特別知道哪些案例怎麼設計，還是我舉例不當，歡迎給予意見，希望討論過程能一同成長。

寫給讀者

這系列文章寫給使用 Vue.js 的前端工程師，帶你了解 Vue.js SPA 專案如何加上 SSR、如何調整部署流程、並且有哪些適用情境與推薦模組。若你是使用 React，請搜尋 Next.js。

主要將按照鐵人賽30天的篇幅，段落切成五大主題：

• Nuxt 基本介紹 : 用途、專案結構與頁面元件基本設定。

  • 講 SSR 演進史
  • Nuxt 扮演什麼角色
  • Nuxt 環境建立
  • 產生簡單頁面
  • Nuxt Routing 規則
  • Nuxt 靜態資源 (Assets) 管理和引用

• Nuxt 頁面細調 : 從簡單頁面到客製細節，涵蓋 頁面元件(Page Component) 切割為 佈局 (Layout)、一般元件 (Component)，調整頁面 讀取效果 (Loading)、轉場效果 (Transition)，以及自訂錯誤頁面。

  • Nuxt 頁面怎麼切會更好？以電商登入頁為例
  • Nuxt 頁面元件細部設定
  • Nuxt 頁面元件簡化過程
  • Nuxt 頁面驗證和錯誤顯示
  • Nuxt 客製頁面效果 - 讀取(Loading)
  • Nuxt 客製頁面效果 - 轉場(Transition)
  • Nuxt 透過 asyncData 動態產生頁面內容

• Nuxt 處理流程 : 從收到 Requst 到產生頁面的中間過程，介紹如何客製經過的 Routing、參數驗證、頁面轉場、錯誤處理等。

  • Nuxt asyncData()
  • Nuxt fetch()
  • Nuxt 運行模式 (Mode) 差在哪？
  • Nuxt Middleware，請求與回應間的中盤商
  • Nuxt <nuxt-link> 有什麼特別
  • Nuxt 處理首屏 - <no-ssr>
  • Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)
  • Nuxt 細說<nuxt-child> 和 <nuxt>

• Nuxt 進階 : 介紹全域設定、Module、Plugin，講解生命週期外的 serverMiddleware，推薦幾個社群維護的實用 Module。

  • Nuxt 全域設定檔 (nuxt.config.js)
  • Nuxt Plugin 如何讓 Axios 更好用 (上)
  • Nuxt Plugin 如何讓 Axios 更好用 (下)
  • Nuxt Module，Nuxt 的擴充元件
  • @nuxtjs/axios 如何包 module

• Nuxt 部署 : 四種部署情境

  • Static Page (Github Pages)
  • Heroku
  • 反向代理 Nuxt 服務
  • 透過反向代理整合現有網站
  • 整合 API 服務

其他部分寫在 補充：

• Koa Template
• 整合 Storybook 預覽元件
• 管理全域狀態 Store

(往後這篇會當成目錄，依序補上連結)