前情提要

從開始安裝到完成，檢查專案目錄下變更的檔案結構，會發現Storybook的安裝做了以下的步驟。

• 安裝需要的相依套件
• 在Package.json加上建置與執行Storybook的Script
• 增加預設的 Storybook Config 檔案
• 增加一些做為範例參考的樣版Story檔案

Storybook 在安裝的時候，會依據專案現有框架，提供最佳的組裝方式。接下來，我們就來分別看看在 Vue 及 Angular 的專案框架下，完成 Storybook 安裝後所產出的檔案。

Vue：檔案結構說明

安裝完 Storybook 後

安裝需要的相依套件

在 devDependencies 區塊，增加安裝了幾個套件

• @storybook/vue 支援Vue開發的Storybook套件
• @storybook/addon-xxx 預設安裝的addon，稍後的單元會介紹

加上建置與執行Storybook的Script

在 scripts 區塊，增加了二個指令

• npm run build-storybook 建置 Storybook
• npm run storybook 啟動 Storybook

增加預設的 Storybook Config 檔案

Config檔案主要放置在 .storybook 目錄下，包括

• main.js
• preview.js

增加一些做為範例參考的樣版Story檔案

樣版Story檔案主要放置在 src/stories目錄下

Angular：的檔案結構說明

安裝完 Storybook 後

安裝需要的相依套件

在 devDependencies 區塊，增加安裝了幾個套件

• @storybook/angular 支援Angular開發的Storybook套件
• @storybook/addon-xxx 預設安裝的addon，稍後的單元會介紹

加上建置與執行Storybook的Script

在 scripts 區塊，增加了二個指令

• npm run build-storybook 建置 Storybook
• npm run storybook 啟動 Storybook

增加預設的 Storybook Config 檔案

Config檔案主要放置在 .storybook 目錄下

為了支援TypeScript，除了main.js及preview.js，還增加了

• tsconfig.json
• typings.d.ts

增加一些做為範例參考的樣版Story檔案

樣版Story檔案主要放置在 src/stories 目錄下

Next

Storybook 的組態設定檔案是放在 .storybook 資料夾底下，下一個單元，就會介紹如何利用這些檔案去設定 Storybook