[Vue.js] storybook安裝方式與環境建置

storybook是UI的開發環境，可以讓開發人員獨立建立元件，並在隔離的開發環境中互動式地展示元件。

storybook在主程式以外運作，因此不需要擔心應用程式特定的依賴關係或需求，用戶可以獨立開發UI元件。

環境

• Ubuntu
• node.js v10.15.1

套件版本：

• Vue 2.6.10
• Storybook 5.2.1

第一步、安裝storybook及相關套件

安裝 @storybook/vue 套件

npm install @storybook/vue --save-dev

安裝其他相依套件，包含：vue、vue-loader、vue-template-compiler、@babel/core、babel-loader、babel-preset-vue。

npm install vue --save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

第二步、新增npm script

在檔案package.json新增script：

{
  "scripts": {
    "storybook": "start-storybook"
  }
  ...
}

第三步、新增config

在檔案.storybook/config.js新增config：

import { configure } from '@storybook/vue';

configure(require.context('../src/components/stories', true, /\.stories\.js$/), module);

代表會載入所有在資料夾 ../src/components/stories 內的符合 *.stories.js 的檔案。

第四步、新增stories

新增一個stories Button.stories.js

// src/components/stories/Button.stories.js
import Vue from 'vue';
import MyButton from '../Button.vue';

export default { title: 'Button' };

export const withText = () => '<my-button>with text</my-button>';

export const withEmoji = () => '<my-button>😀 😎 👍 💯</my-button>';

export const asAComponent = () => ({
  components: { MyButton },
  template: '<my-button :rounded="true">rounded</my-button>'
});

第五步、執行

npm run storybook

打開瀏覽器確認




參考專案架構：

./
├── .storybook
│   └── config.js
├── babel.config.js
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Button.vue
    │   └── stories
    │       └── Button.stories.js
    └── main.js

資料來源：https://storybook.js.org/docs/guides/guide-vue/