Install Storybook

安裝 Storybook 只需要在Terminal，切換到現有專案的根目錄後，簡單的執行一行指令

npx sb init

在安裝的過程中，Storybook會檢查現有專案的dependencies，然後依據專案現有框架，提供最佳的組裝方式。

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

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

安裝完成後，就可以用以下指令執行 Storybook

npm run storybook

看到以下的畫面，就表示 Storybook 能正常運行

DEMO 操作的 Node.JS 版本，一律使用 v.12.18.3

我是使用nvm做為Node.JS版本的管理，在此建議大家搭配服用，效果更佳！

DEMO: 在 VUE 的現有專案安裝 Storybook

使用 Vue CLI 建置專案

$ npm install -g @vue/cli
$ vue create vue-storybook-sample
$ cd vue-storybook-sample
$ npm run serve

把Storybook功能加入Vue的現有專案中

npx sb init

接下來，Storybook的服務會安裝需要的相依套件

Storybook會在Package.json加上建置與執行Storybook的Script

// package.json
"scripts": {
  ...
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
},

npm run storybook

DEMO: 在 Angular 的現有專案安裝 Storybook

使用 Angular CLI 建置專案

$ npm install -g @angular/cli
$ ng new angular-storybook-sample
$ cd angular-storybook-sample
$ npm run start

把Storybook功能加入Angular的現有專案中

npx sb init

接下來，Storybook的服務會安裝需要的相依套件

Storybook會在Package.json加上建置與執行Storybook的Script

// package.json
"scripts": {
  ...
  "build-storybook": "npm run docs:json && build-storybook"
  "storybook": "npm run docs:json && start-storybook -p 6006",
},

npm run storybook

Next

安裝完 Storybook 所產生的檔案，會在下一個單元說明，透過理解結構，讓後續操作更加順利。

Reference

Storybook官網的安裝教學：Vue、Angular

npx - 專案建置時期使用的全域安裝模組，可以使用 npx 取代

nvm - 透過 nvm 快速切換 node 版本