iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理 系列

以Vue CLI的方式建立專案後,切版的部分以BootstrapVue框架實作,以 Firebase 的 Cloud Firestore作為網站的資料庫,並以簡單的MVC模式設計程式,希望最後能完成一個部落格應具有的基本功能。

鐵人鍊成 | 共 30 篇文章 | 13 人訂閱 訂閱系列文 RSS系列文 團隊自討苦吃三十天#像極了愛情
DAY 1

Day 01: 奇怪的理論 + 有點廢的入門

( 先說,因為真的不知道第一篇寫些什麼好,所以第一篇真的很廢,請別第一天就棄坑了呀哈哈 XD ) 我對個不知從哪聽來的人的分級理論印象很深,由高到低分別為 :...

2020-09-09 ‧ 由 五百億 分享
DAY 2

Day 02 : 比較少用的生命週期

平時比較少用的生命週期 這是一段HTML <div id="app">{{ name }}</div> 通常...

2020-09-10 ‧ 由 五百億 分享
DAY 3

Day 03: 組件 Prop + Slot + 仿造 BootstrapVue <b-button>

Prop 是拿來做什麼呢 ? 是我們註冊完一個組件並定義好內容後,可以從父層 ( HTML標籤使用處 ) 透過 Tag Attribute 的方式傳遞資訊給子層...

2020-09-11 ‧ 由 五百億 分享
DAY 4

Day 04: 組件自定義發射事件,父子資料傳遞

上一章我們的 b-button 只是徒有虛名而已,接下來要讓他擁有一些作用。 以下是本章參考資料,可以晚點再回來看,最下面也會放。 https://ji...

2020-09-12 ‧ 由 五百億 分享
DAY 5

Day 05: 具名插槽 + 作用域 + CLI 前哨站之拆解 BootstrapVue Table cell() 假象

具名插槽 Named Slot 話說,真的很傻眼餒 ~~~ ,為什麼報名錯的項目不能取消阿,害我多一個空項目在那邊。今天講的是命名插槽啦,比昨天還要簡單的多,因...

2020-09-13 ‧ 由 五百億 分享
DAY 6

Day 06: 製作動態組件

參考資料 动态组件 & 异步组件 - Vue.js 我覺得自己文章標題取有夠爛,沒什麼美感又超白話哈哈,這篇是個獨立的單元講述動態組建的建立和切換,沒...

2020-09-14 ‧ 由 五百億 分享
DAY 7

Day 07: Vue-CLI 先認識專案目錄

拍謝今天比較 tired 所以更新比較 less la,開頭補一下這句 XD。 廢話不多說用 CLI 先終端機執行 npm install -g @vue/cl...

2020-09-15 ‧ 由 五百億 分享
DAY 8

Day 08: Vue Router 超基本部分

基本上使用 Vue CLI 是一定要使用 Router 的啦,如此才是邁向 Vue 完全體的第一步阿,不這樣做就等於失去這辛辛苦苦建立起來的的開發環境意義了,ㄏ...

2020-09-16 ‧ 由 五百億 分享
DAY 9

Day 09: BootstrapVue 準備個首頁

今天的內容比較簡單,準備一些畫面而已,大家可以貼一貼自行看一下就好,或者改造成自己的版本,使用 BootstrapVue 第一步先在 CLI 建好的環境下開啟終...

2020-09-17 ‧ 由 五百億 分享
DAY 10

Day 10: Firebase 導讀

首先在瀏覽器搜尋 Firebase 去逛逛他的首頁,我們要使用的服務,必須好好看看他的外觀才行,不要一開始就點別的連結啥的進到文件去了,否則根本無法得知這大概是...

2020-09-18 ‧ 由 五百億 分享