本篇要解決的問題
之前在前端的 FB 社團上看到有人分享 Storybook 的 貼文，就想說這東西有這麼好用？後來 Google 了一下，也去爬了一些文。
相信會看到這篇的人，都去過了 Storybook 的官網，大概知道可以做些什麼厲害的事情，這邊就不多寫。
不過問題來了，August 所在的公司，大部份都是為客戶製作單一的活動頁面，通常一看就是看整個頁面，在意的也是頁面的轉換率跟成效，不太會要單一 UI 來測試或是說明，那要花時間學嗎？
一直覺得學新東西，就是為了要能解決問題。
看著 Storybook 的 Sample，想到確實有一個問題是可以被解決的，就是每一次收到的設計稿，幾乎全是新的，新的配色、新的樣式，會用到重覆 UI 的機率實在太少，所以每次都是新寫新寫再新寫。
這個問題，有沒有可能是因為提案的企劃，或是設計師沒有一個可參考的 UI 集造成的呢？如果有一個將過往覺得好看、舒適的 UI 集合起來，讓他們在發想時就參考著用，會不會就可以提升重複使用的機率，進而減少開發時間？
所以決定碰 Storybook，主要就是想用來做一個 UI 的整理集，讓設計師、企劃在提新案子時，可以直接看過往有的 UI 來設計頁面，這樣在製作頁面時就可以直接 copy 那些 components，節省開發時間，而不是在每個案子上都手刻新的 UI。
也因為目的單純就是有個站可以來看過往的 UI，因此本篇主要筆記的是 Storybook 的基本使用，CSS、JS 部份都是寫在 Components 裡，而不是寫在 xxx.stories.js 裡去試 action 等等的。
想要做到當設計選了哪一個 Component 後，我們前端這邊直接複製貼上改個顏色或文字就可以使用。
看到文件中的 action、addons、test ……等等的，就之後一邊使用一邊看需不需要再深入研究。
因為 August 主要是用 Vue.js，因此 Storybook 上存的就是 Vue 的 Components，而不是爬文時比較常見的 React.js。
另外說明，本篇用的是 Storybook 5 的版本。
安裝
首先先裝好 Vue CLI，安裝方式直接看 文件說明。
安裝完後，用終端機輸入：
vue ui透過操作介面新增專案，因為主要目的是做一個專門整理 UI 的，安裝方式直接選預設也行。
建立完 Vue CLI 的專案後，接著就可以開始安裝 Storybook。
在專案資料夾中開啟終端機，輸入：
npx -p @storybook/cli sb init --type vue按下 Enter 後就會開始安裝 Storybook。
安裝成功後，會看見多了二個資料夾，一個是「.storybook」，一個是「stroies」，打開「stories」會看到新增了 4 個範例檔案：
Storybook 是一個 stories.js 中，可以包多個 {compoent}.js。
所以像上圖，就是 0-Welcome.stories.js 包了 Welcome.js，而 1-Button.stories.js 包了 MyButton.js。實際上各個 XXX.stroies.js 中還可以包更多個 JS 檔。
最後我們輸入：
npm run storybook就會看見在本機上開啟了 Storybook：
整理檔案架構
把 stories.js 跟 {component}.js 都放在同一個資料夾中，覺得以後很難維護，August 的構想是「stories」的資料夾統一放 stories.js，另外建一個「components」資料夾來放各個 {component}.vue。
本篇是建立 Header 跟 Footer 來當作 Demo，整理完之後的資料夾變這樣：
未來只要有新做出一個 Footer，就包成 XXX.vue 放進「Footer」的資料夾中，然後在 2-Footer.stories.js 中引用進去就行。
如果 xxx.stories.js 的檔案不想放在「stories」的資料夾中也行，只是確認好要放的資料夾後，記得到「.storybook/main.js」修改其中的「stories」路徑。
檔案介紹
{component}.vue
像是這邊在「Footer」中有一個 sample.vue，就像是我們一般用了 Vue CLI 後的 XXX.vue 檔案一樣，拿來寫 Component 用的。基本上就一模一樣，不用另外說明。下一段會筆記怎麼樣在 {component}.vue 中使用 pug、sass。
xxx.stories.js
stories.js，我們可以想像成是一個能裝進很多個 Component 的包包，它的檔案內容大概如下：
title 的值很重要，它會成為 Storybook 側邊導覽列的項目名稱。
其它的 export 就是這個 storie 裡有的項目，August 的實測結果是…可以寫中文 XD，都顯示英文也太逼死人。
其它 export 的 template，就想像我們一般建了 {component}.vue 以後，要寫進 HTML 裡的那個 tag，所以也可以加上 props 或是 v-bind、v-on，但這邊單純就是要存下 UI，就不加那些有的沒的。
使用 Pug、Sass
在開發時為了方便又快速大部份會用 Pug 跟 Sass。
之前在用 Vue CLI 時很方便，用 npm 安裝完 sass、sass-loader，也不用另外開一個 webpack.config.js 寫 loader，安裝完後 Vue CLI 就會幫我們處理好，自動就能編譯。
但用到了 Storybook 上，就會一直報錯，報說需要 loader。
要在 Storybook 上用 Pug、Sass 的方式很簡單。
1 確認好有安裝 Pug、Sass 的 loader，安裝方式為在專案下開啟終端機，輸入：
npm install -D sass node-sass sass-loader pug pug-plain-loader2 在「.storybook」的資料夾中，新增一個「webpack.config.js」的檔案。
3 在前一步新增的 webpack.config.js 中，貼上以下 code：
webpack 的 loader 一直不太會寫，code 裡面有貼上 August 找到的來源，只能說 Google 真是可怕的東西，難怪很多人會說現在都是靠 Google 在寫程式。
完成這三步，{component}.vue 的檔案中就可以寫 Pug 跟 Sass 了。
在 Storybook 上使用標題跟資料夾的層級
如果我們打開 Storybook 預設建立好的檔案，看到側邊欄是長這樣：
但在看官網時，會看到這樣子的範例：
這不科學啊，為什麼官網的會多了標題跟資料夾？
後來翻了一下 文件，要加上標題跟資料夾還蠻簡單的。
在 xxx.stroies.js 中，我們寫了「title」來改變項目名稱，要加上層級也是改 title 就行。
想加標題，就用「|」來分隔。
想加資料夾，就用「/」來分隔。
比方 August 這邊在 1-Header.storie.js 的 title 寫成以下：
export default {
title: 'Public | 天地/Header'
};在 2-Footer.stories.js 的 title 寫成：
export default {
title: 'Public | 天地/Footer',
};我們在打開 Storybook 後，就會看見側邊欄變成了：
是不是很簡單？
輸出成靜態檔
Storybook 跟 Vue CLI 一樣可以輸出成靜態檔，放上主機後就能讓其他人看到。
終端機輸入以下就會產出：
npm run build-storybook不過產出後看到很多 react 開頭的 .js 檔案，不知道是不是真的都要用到，或是說有沒有只產出真的會用到的檔案的方法？如果有高手知道請麻煩留言提供~
範例程式碼
August 將以上步驟做出的檔案放到 GitHub 上：
https://github.com/letswritetw/letswrite-storybook-init
載下來後，輸入：
npm install再輸入：
npm run storybook就可以看到這一篇的範例了。
