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 1

#1: 前言&簡介&大綱

前言 首先,這不太算一個 Nuxt 教學文,只是想分享自己用 Nuxt 建立一個 blog。這次參賽的目標是想分享自己學到的知識,並記錄自己的學習過程,所以東西...

2018-10-08 ‧ 由 HunterLiu 分享
DAY 2

#2: 三秒建立一個 Nuxt 應用

create-nuxt-app 要建立一個 Nuxt 應用,真的非常容易,只需要透過 create-nuxt-app 工具。 指令: npx create-nu...

2018-10-09 ‧ 由 HunterLiu 分享
DAY 3

#3: Nuxt.js 簡介 & 學習連結分享

上一篇,在不知道 Nuxt 是什麼的情況下,使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...

2018-10-10 ‧ 由 HunterLiu 分享
DAY 4

#4: nuxt.config.js

這篇稍微介紹一下 nuxt.js 的設定檔: nuxt.config.js。 可以將以下專案 clone 下來,了解一下基本目錄結構。 github repos...

2018-10-11 ‧ 由 HunterLiu 分享
DAY 5

#5: Boilerplate(pug & stylus & 其他基礎設定)

在簡單介紹完 Nuxt.js 之後,今天會接著將 Day02 的 002-create-nuxt-app branch 接續開發下去,目標是加入: pug s...

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

#6: Storybook(含有兩個元件範例)

Storybook 簡介 官方 Demo Storybook 方便我們開發 UI 元件,使用 storybook 可以看到 UI 元件在不同狀態下的樣貌。 另外...

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

#7: Storybook 和 Nuxt.js

storybook 版本升級 如果有看上一篇的話,會發現上一篇的範例用的是 storybook 3.4.10。因為重新用 webpack4 建立了 Nuxt 2...

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

#8: Plop: 三秒寫一個 component

上一篇,整合了 Storybook 和 Nuxt,也建立了一個元件為 MyButton。 但如果每次要新增一個元件,就要建立四個檔案如下: index.js...

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

#9: Vuetify 簡介 + (vuetify.config.js)

Vuetify 是一個基於 Vue 的 UI 框架, 類似於 Vuetify 的框架或函式庫有很多,例如: Element UI VueStrap...

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

#10: Vuetify 導入 Storybook & Nuxt.js

上一篇將 vuetify 的 theme 拆成獨立的檔案 (vuetify.config.js)。 這篇會將 vuetify 引入 storybook 中,同步...

2018-10-17 ‧ 由 HunterLiu 分享