iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

玩轉 Storybook 系列

Storybook可以縮小專案團隊中開發的溝通Gap,它會跟著專案目前開發的程式碼呈現統一的元件功能展示,它是一個用於元件開發、測試和文件說明的工具,並支持Vue、React、Angular等主流框架。

我會透過30天的文章,整理 Storybook 的完整說明,帶大家 Step-by-Step 的玩轉 Storybook,。

目前我是使用Vue做專案開發,所以會以Vue框架的設定為主。因為也接觸過 Angular,也可能會一併放上Angular整合Storybook的方法。

鐵人鍊成 | 共 30 篇文章 | 33 人訂閱 訂閱系列文 RSS系列文
DAY 11

玩轉 Storybook: Day 11 Simple component - Vue

在這個單元我們使用官網的教學搭配Vue的框架,STEP BY STEP的撰寫Component及Stories。 Setup Vue Storybook 官網教...

2020-09-26 ‧ 由 lala_lee_jobs 分享
DAY 12

玩轉 Storybook: Day 12 Composite component - Vue

接下來就來把Task元件組裝成TaskList吧 TaskList 可以把TaskList規劃成四種狀態 Default - 當 Task 都是 defu...

2020-09-27 ‧ 由 lala_lee_jobs 分享
DAY 13

玩轉 Storybook: Day 13 Simple and Composite - Angular

在這個單元我們使用官網的教學搭配Angular的框架,STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者,可以跳過這個單...

2020-09-28 ‧ 由 lala_lee_jobs 分享
DAY 14

玩轉 Storybook: Day 14 Addons - Essential / Actions

Storybook的另一個主要的功能就是Addons 在使用Storybook做元件開發設計時搭配Addon功能更加強大 接下來就來好好體驗感受他的威力吧 寫在...

2020-09-29 ‧ 由 lala_lee_jobs 分享
DAY 15

玩轉 Storybook: Day 15 Addons - Controls

Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式,這樣就不需要寫程式重啟,也能發現元件的變化。 要使用 Control...

2020-09-30 ‧ 由 lala_lee_jobs 分享
DAY 16

玩轉 Storybook: Day 16 Addons - Viewport/Accessibility

Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...

2020-10-01 ‧ 由 lala_lee_jobs 分享
DAY 17

玩轉 Storybook: Day 17 Unit Test with JEST

用 Storybook 搭配測試方法,從元件開發到完成整個專案,可以增加開發者的信心,不會擔心改A錯B的狀況發生,因為從邏輯面及UI面都能被完整的測試到。 單元...

2020-10-02 ‧ 由 lala_lee_jobs 分享
DAY 18

玩轉 Storybook: Day 18 Automated Visual Testing

視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化,當專案越來越大時,或是接近上線時期,修改元件的部分,有時會影響到整個專案。人工去檢視一定會有疏...

2020-10-03 ‧ 由 lala_lee_jobs 分享
DAY 19

玩轉 Storybook: Day 19 Wire in data - Vue & Vuex

Container and Presentational 官網的程式碼架構,會把元件分成二種類型-容器型(Container)及表現型(Presentation...

2020-10-04 ‧ 由 lala_lee_jobs 分享
DAY 20

玩轉 Storybook: Day 20 Construct a screen - Vue

在前面的單元,我們已經完成了開發單一元件Task,也完成了複合元件 TaskList,也把 TaskList 拆分為容器型(TaskList.vue) 及 表現...

2020-10-05 ‧ 由 lala_lee_jobs 分享