前言

在 MVC 的開發階段的過程，在處理 view 的部分，由於多數框架渲染引擎的耦合性特別高，個人一直沒有好感(就像阿兩對小町)。

自從被前輩推坑進入 MVVM 的世界之後就回不去了，前後端分離不但可以讓兩頭同時開發，且前端畫面的常用元件，
終於可以站在巨人的肩膀上，不用自己造輪子啦! 節省許多開發與維護的時間!

隨著前後端分離的 SPA 因為 SEO(相對不優)、初次載入耗時兩大問題，逐漸再次轉向 SSR，只是仍然保持前後端分離的不變原則，所以 Nuxt.js、Next.js 也相繼出現。

在這次的踩坑分享中，主要紀錄、介紹透過 Laravel 與 Nuxt.js 兩大入門學習曲線較緩的框架，順利建立前後端分離的 SSR 網站!

採坑內容

此次紀錄踩坑內容大致分為以下重點：

0. 惱人的環境介紹
1. 後端 Laravel
   • 專案結構介紹與相關設定
   • Migration, Model & Resource
   • DI 依賴注入
   • Repository
   • Service
   • Controller
   • Validation
   • FormRequest
   • Route
   • Middleware
   • JWT
   • No Access-Control-Allow-Origin
2. 番外篇
   • GIT sub-module
3. 前端 Vue & Nuxt
   • 專案結構介紹與相關設定
   • Vue Component 基礎屬性(1)、(2)
   • Vue v-for
   • Vue v-model
   • Nuxt page component
   • Nuxt Route
   • Nuxt 中的 Vuex & Cookie
   • Nuxt plugin
   • Nuxt no-ssr
4. 動手造個輪子
   • Form
   • Register, Login & logout
5. 番外篇
   • SCSS
6. docker 部屬
   • Laravel
   • Nuxt
7. 完賽

明天就從準備惱人的環境開始吧!