iT邦幫忙

鐵人檔案

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

玩轉 Storybook 系列

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

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

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

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

玩轉 Storybook: Day 01 說明

Intro 想做這個主題是因為,在翻閱過去的鐵人賽,「單純」只討論 Storybook 的文章並不多,雖然它的基本觀念並不難理解。 若有更多人知道及理解這個好用...

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

玩轉 Storybook: Day 02 安裝

Install Storybook 安裝 Storybook 只需要在Terminal,切換到現有專案的根目錄後,簡單的執行一行指令 npx sb init...

2020-09-17 ‧ 由 lala_lee_jobs 分享
DAY 3

玩轉 Storybook: Day 03 專案結構

前情提要 從開始安裝到完成,檢查專案目錄下變更的檔案結構,會發現Storybook的安裝做了以下的步驟。 安裝需要的相依套件 在Package.json加上建...

2020-09-18 ‧ 由 lala_lee_jobs 分享
DAY 4

玩轉 Storybook: Day 04 Configure

預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook,若需要變更路徑及名稱,要在Storybook的CLI指令做設定。...

2020-09-19 ‧ 由 lala_lee_jobs 分享
DAY 5

玩轉 Storybook: Day 05 CLI Options

以下列出,啟動或是建置 Storybook 時,有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...

2020-09-20 ‧ 由 lala_lee_jobs 分享
DAY 6

玩轉 Storybook: Day 06 Component Story Format

Story檔案放置位置 Component對應的Story檔案,通常會放置在Component檔案旁邊。Story只會用於開發時期,在Production的bu...

2020-09-21 ‧ 由 lala_lee_jobs 分享
DAY 7

玩轉 Storybook: Day 07 Write stories

Template & Args 同一個元件的多個story function,都會重複的指定相同的Template,可以拉出一個共用 template...

2020-09-22 ‧ 由 lala_lee_jobs 分享
DAY 8

玩轉 Storybook: Day 08 Parameters

Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料),Parameter能提供給不同的addon去做設定。...

2020-09-23 ‧ 由 lala_lee_jobs 分享
DAY 9

玩轉 Storybook: Day 09 Decorators

Decorators Decorator是一種設計模式,把要被裝飾的Story當做參數,傳入裝飾器中,Decorator可以幫Story加上額外的資訊,賦予給S...

2020-09-24 ‧ 由 lala_lee_jobs 分享
DAY 10

玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components 修改一下Story檔案,對應於Component的Title名稱(default export區塊),就會發現Sidebar...

2020-09-25 ‧ 由 lala_lee_jobs 分享