iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog 系列

用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog

鐵人鍊成 | 共 30 篇文章 | 79 人訂閱 訂閱系列文 RSS系列文 團隊武裝狗狗
DAY 11

#11: 撰寫 Layouts (default, admin, error)

經過了十天,稍微回顧一下,目前的進度: 我們現在有一個 Nuxt 2.0 應用,UI framework 是使用 Vuetify,並透過 storybook 協...

2018-10-18 ‧ 由 HunterLiu 分享
DAY 12

#12: Pages 簡單介紹與初建所有頁面功能

如果看過上一篇的 layout/default 的截圖,可以大概了解 blog 的樣子。 這邊先簡單拆分為兩個部分: 管理者相關(使用 layout/admi...

2018-10-19 ‧ 由 HunterLiu 分享
DAY 13

#13 元件開發: TheTags

上一篇將 blog 所需要的頁面整體結構都建好了,但其實內容都還沒有做啊。 因為會用到許多套件,接下來的篇幅,會先將頁面所需要的元件寫完,再完成所有頁面的切版與...

2018-10-20 ‧ 由 HunterLiu 分享
DAY 14

#14 套件安裝及設定: markdown-it

markdown-it 是一個 markdown parser。 官方 Demo 因為個人很喜歡寫 markdown,所以當然部落格也要可以用 markdown...

2018-10-21 ‧ 由 HunterLiu 分享
DAY 15

#15 套件安裝及設定: highlight.js 使用與 markdown-it-highlightjs 自定義套件撰寫

highlight.js 可以幫助我們寫出有高亮的 markdown。 其實已經有寫好的 markdown-it 套件,markdown-it-highligh...

2018-10-22 ‧ 由 HunterLiu 分享
DAY 16

#16 元件開發: TheMarkdown 自定義樣式

經過了前面兩篇新增了 markdown-it 和 highlight.js,今天來開發 TheMarkdown 元件,因為所需要的套件和設定都已經在前兩篇完成,...

2018-10-23 ‧ 由 HunterLiu 分享
DAY 17

#17 元件開發: ThePostPreview (default & admin 模式)

~~快要爆炸啦~~~~最近要趕工作~~~~快要齁不住了~~ 今天來寫一個文章摘要預覽的元件,主要有兩種模式: default: 使用者會看到的模式。 admi...

2018-10-24 ‧ 由 HunterLiu 分享
DAY 18

#18 套件安裝及設定: vue codemirror

今天會擴充套件 codemirror 和 vue-codemirror。使我們在部落格中編輯或發佈文章時,輸入的 markdown 是會有高亮的,這篇是為了之後...

2018-10-25 ‧ 由 HunterLiu 分享
DAY 19

#19: 為何我選擇 simple-vue-validator?

開始之前先強調一下,工具的選擇取決於使用情境,還有個人喜好,本篇會根據自己的使用經驗,分享為何自己選擇 simple-vue-validator 而不是其他的套...

2018-10-26 ‧ 由 HunterLiu 分享
DAY 20

#20 元件開發: FormAddPost (使用 simple-vue-validator)

今天開發的 FormAddPost 主要功能為 新增/修改 一篇文章的表單。 會用到之前寫的元件: TheMarkdown vue-codemirror Po...

2018-10-27 ‧ 由 HunterLiu 分享