鐵人檔案
Storybook可以縮小專案團隊中開發的溝通Gap，它會跟著專案目前開發的程式碼呈現統一的元件功能展示，它是一個用於元件開發、測試和文件說明的工具，並支持Vue、React、Angular等主流框架。
我會透過30天的文章，整理 Storybook 的完整說明，帶大家 Step-by-Step 的玩轉 Storybook，。
目前我是使用Vue做專案開發，所以會以Vue框架的設定為主。因為也接觸過 Angular，也可能會一併放上Angular整合Storybook的方法。
Intro 想做這個主題是因為，在翻閱過去的鐵人賽，「單純」只討論 Storybook 的文章並不多，雖然它的基本觀念並不難理解。 若有更多人知道及理解這個好用...
Install Storybook 安裝 Storybook 只需要在Terminal，切換到現有專案的根目錄後，簡單的執行一行指令 npx sb init...
前情提要 從開始安裝到完成，檢查專案目錄下變更的檔案結構，會發現Storybook的安裝做了以下的步驟。 安裝需要的相依套件 在Package.json加上建...
預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook，若需要變更路徑及名稱，要在Storybook的CLI指令做設定。...
以下列出，啟動或是建置 Storybook 時，有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...
Story檔案放置位置 Component對應的Story檔案，通常會放置在Component檔案旁邊。Story只會用於開發時期，在Production的bu...
Template & Args 同一個元件的多個story function，都會重複的指定相同的Template，可以拉出一個共用 template...
Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料)，Parameter能提供給不同的addon去做設定。...
Decorators Decorator是一種設計模式，把要被裝飾的Story當做參數，傳入裝飾器中，Decorator可以幫Story加上額外的資訊，賦予給S...
Naming components 修改一下Story檔案，對應於Component的Title名稱(default export區塊)，就會發現Sidebar...
