NUXT.js 前端開發實戰手冊

前端工程師的神兵利器？

如果你有看過電影哈利波特死神的聖物，劇中提到只要得到三項魔法物品(接骨木魔杖、重生石和隱形斗篷) 就能成為死亡的主宰，而在這堂課我則是提出了三項技能，我認為前端工程師只要能夠掌握這三項技能，就能在職場上有非常大的競爭力，這三項技能分別是：了解前端開發 、了解後端原理 ，以及了解如何有效率的佈署。

不過前端為什麼要學這麼多東西？因為近幾年來前後端分離的架構興起，一種由前端主導的開發流程出現 (SPA 網站)，前端已經不像是以前切切版，串串資料這麼簡單了，而是要掌管整個 web 開發的流程面向，像是會員登入、router 建立、佈署等工作。

而這三項技能，就是這堂課的學習重點，我將他稱之為神兵利器，課程將使用 nuxt.js 作為神兵利器的解決方案。

了解前端開發：vue.js/nuxt.js ( 課程第2章、第3章、第4章、第6章、第7章 )

前端開發就是基於 vue.js 所開發出的 SPA 網站，路由 (router) 是由前端掌控的，並且可以用元件 (component) 的方式來開發網站，有別於 MPA 網站 (多頁面應用) 是透過後端框架印出 html 出來，前端開發則是透過 vue 來產生 html。

本課程使用 nuxt.js 做為前端開發的框架，最主要是他能夠實作 SSR 架構 (server side rendering) 的網站，這堂課會從 nuxt.js 初始建立、頁面組件佈局與開發、mock server 搭建、到串接 rest api 等，完整呈現 前端開發 的工作流程。

了解後端原理：node.js + firebase ( 課程第5章、第6章、第8章 )

node.js 就是一套後端語言，前端通常會拿來作為建構工具 (vue cli、webpack 等)，本課程的 nuxt.js 其實就是一種 node 後端應用，所以了解 node 是理解 nuxt.js 重要的方式，這堂課我會透過搭建 mock server 來講解 node.js 與 後端原理，資料則會串接 firebase，讓前端有能力可以建置一個完整的網站系統，課程也會用 node + firebase 實作 google OAuth 登入網站 的應用。

了解如何有效率的佈署：Linux + gitLab cicd ( 課程第1章、第9章 )

如果你要架設 nuxt.js (universal) 網站，現在已經有很多解決方案，像平台即服務的架站方式 Heroku，甚至是 firebase 的 hosting 都可以架設 nuxt 應用，但本課程是用 Google Cloud Platform 來開設一個 linux vm，從軟體安裝、環境設定到架設 nuxt.js 網站，都會帶你跑過一變，這樣我們就能更加掌控我們要實作的應用，最後我們在導入 gitlab 的 cicd，並加入多站台的環境 (prod、sit)，實作 Merge code 佈署、一鍵化佈署 就完成程式上線的目的。

深度與廣度技術的結合

總結上面三項技能，這堂課其實是一門前端深度與廣度知識結合的課程，也是我在職場上的學習歷程，最主要的目的是讓你成為一個能獨當一面的前端工程師，不管你是邁向 senior、獨自接案甚至是 startup，都能從這堂課學習到一套完整的解決方案。

課程架構

本課程共分為 9 個章節，課程主要是實作一個 wayne1894教學網 (會挑選網站重要的功能來實作)，從實作的過程中逐步了解本課程提出的三項技能。

另外，課程也導入了英雄等級成長概念，依課程的難易度共分為三個等級的英雄修煉。
第一級(1 ~ 5章) 為 nuxt 開發基礎的部份，主要是講解 nuxt 的基本概念、前端開發的準備工作等。第二級(6 ~ 8章) 就是前端開發重點實作的部份，英雄也升級到頗具威力的光劍英雄，學習從註冊登入到串接 mock、套用後端 firebase 的資料等。第三級(第9章) 也是比較複雜的主題，由鋼鐵人來代表，代表著網站建置的科技變得很強大，主要是學習使用 gitlab 自動佈署 nuxt 程式。

上述三個等級的課程也穿插了本課程的三項技能，佈署、後端、前端開發 (上圖，使用顏色表示)，各章節詳細的教學內容請參考課程章節列表，這堂課是一條英雄修煉的漫漫長路，就讓我們一起來成長英雄的等級吧。

課程注意事項

1、 課程使用 mac 做為教學環境，但開發 nuxt.js 作業系統因素影響不大，若有跨平台程式的章節，會盡量補足 windows 平台的資訊。

2、課程會使用 Google Cloud Platform 架設一個 linux vm (以利本課程架站佈署的進行)，google 有提供 12 個月免費試用‎方案，但註冊需準備一張 visa 信用卡。