用 VueJS 搭配 Firebase 實作一個部落格網站
What you'll learn
- VueJS 概念與完整教學
- 學會使用 Vue 串接 Firebase Cloud API
- 使用 Vue Cli 起手專案
- 學習單向資料流 Flux 概念
- 用 Vuex 導入資料流向
- 建置一個 CRUD 的部落格
Course content
- Preview06:56
- 12:22Vue js簡介與Vue官方文件介紹
- 08:22Vue CDN使用,Vue App Initialization
- 16:57v-bind 屬性綁定與資料插值
- Preview14:40
- 23:57v-if 條件渲染與v-for 列表渲染
- 13:41Methods 方法與事件處理
- 15:22Computed 計算屬性與 Filters 資料過濾
- 09:43Watch 監聽資料
- 08:37Vue-CLI 介紹與環境建置
- 14:14Vue專案建置、腳手架介紹
- 21:14Lifecycle - Vue實例的生命週期
- 20:45Components 組件介紹
- 14:09Components 組件在Vue-Cli中的使用
- 25:03利用組件重構首頁與Bootstrap-Vue快速建構基本樣式
- 1 question用 Vue 建置首頁
Requirements
- 不需要嚴謹的程式背景,願意思考學習
- 有操作 Mac/Windows 電腦的基礎
- 具備快樂學習的心情與一個假日
- 具有 HTML, CSS 觀念,有操作過 JavaScript
Description
身為網頁設計師的你,想要擁有作品轉型成前端嗎?不懂網頁需要有人一步步帶你完成網站。想要學習 VueJS 仍沒有時間好好靜下心來學習。這次參與至該堂課,將是幫助你完成自己部落格網站的契機。
你為什麼需要上這堂課?
VueJS 是前端必懂三大網頁框架之一,由前 Google 中國工程師(Evan You)所開發,除了擁有豐富的中文資源以外,更在開發過程中有著 89% 的開發者滿意度。作為UI/UX設計師、前端開發者、後端工程師,甚至是剛入門網頁開發的新手都能以簡單的方式進行開發。其中更包括宣告式語法與 MVVM 方式,解決以往傳統 Javascript 是以命令式方式操作 DOM 文件,進行複雜的處理並且沒有智慧性。透過雙向綁定的概念,其友善程度會大幅降低對於資料的理解。
本課程將會包含以下內容:
這堂課程分為四個大章節。從基礎 VueJS 介紹與官網文件做分享,使用開發者常用的編輯器 VScode(Windows/Mac 皆能安裝使用)去製作一個完整 CRUD 的部落格網站。上完這堂課,你將擁有自己建置部落格網站的能力,跟著講師一起使用 VueJS 完成。在開發一個應用其結構是相當重要的,因此這堂課會教你學習 Vuex 單向資料流向的結構處理,避免過去資料混亂,而無法駕馭除錯的情形。並且我們將串接 Google 提供的雲端服務 Firebase 去進行網站資料串接。Firebase 提供你儲存資料以及友善的 API,對於小型企業/個人都是很好的選擇方案。串接 Firebase API 並上線你的部落格,完成你的一個作品。
VueJs 基本介紹與運作。
Vuex 單向資料流的處理。
Firebase Cloud 串接 CRUD 。
讓網站部署至 Firebase,正式上線。
關於這堂課
快樂學程式在台灣擁有超過 1000 人參與的在地社群活動。截至 2020 年我們已經舉辦超過兩年的社群與活動,每個月皆有程式思維相關的聚會與交流,深耕社群並參與推廣工程思維,讓非本科系的男孩女孩皆能一窺程式的風趣與培養解決問題的能力。這次與 Glove 推出這堂「用 VueJS 搭配 Firebase 實作一個部落格網站」,內容屬於入門並有完整串接實作,從 VueJS 到串接部署至 Firebase Cloud 等一個個逐步講解。做為上課學員的你可以在裡面跟著一起練習,反覆操作完成一個屬於你的 VueJS 部落格:)
Who this course is for:
- 對前端開發有興趣,並有聽過 VueJS
- 對完整建立一個部落格有興趣
- 嘗試接觸串接 API 對完成一個作品動力
Instructor
Using Engineering Thinking build up digital nomads skill.
快樂學程式成立於 2017 年,希望能提供給非本科系與相關領域的學生以及工作者們一個友善學習程式的平台,幫助大家培養工程思維以及邏輯思維,運用在解決工作上以及生活中的各種大小事。
工程思維為建立解決方法中的邏輯化思考。例如處理你的支出報告,你減少非需要支出,增加你的可動用資產。這時候會需要紀錄你每月份的支出與收入並在適當的軟體工具上建立你的收支紀錄,透過收支紀錄組織每月的標準支出。可以從圖像流程化列點出步驟、要點、目標後進而找出改善方式,以達成解決問題的方法。
建立良好的工程思維會幫助你更好、快速地組織出問題的解決辦法。運用系統化思考與流程化條列,提升你溝通與組織問題的能力,在數位化時代是相當重要的技能,同時,我們將推出更多的課程幫助提升數位能力。
提升數位化專長不再只是空談。快樂學程式舉辦每月的工作坊,並與社群舉辦主題社群小聚,讓喜愛網路生活與增加數位能力的數位住民更多的機會與舞台交流,快樂輕鬆地建立你的工程思維與解決問題的軟實力技能。