storybook+Vue3+Boostrap5：簡配storybook

Wendy Chang

Published in

Wendy Loops

9 min readApr 11, 2023

最近的工作內容是把BS魔改成客製化樣式，然後客製常用的元件出來，以後要可以直接取用，這時候搭配storybook這個專門管理元件的UI工具，就可以取悅(?)辛苦設計UI元件的UI設計師嚕。

storybook有很多很厲害的功能，但是因為我沒有要用到那麼多，所以算是有點大材小用storybook了。

安裝storybook

安裝storybook之前，要先安裝好vue-cli，又因為我要取用bs還要魔改它，所以scss的相關套件也要一併安裝

// 建立新專案 記得安裝scss
vue ui

// 安裝 bs & 支援bs的popper
npm i --save bootstrap @popperjs/core

// 安裝scss相關套件
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

npx storybook init

npm跟npx兩個都是用來下載node工具包的指令，差異在於npm是永久安裝，npx是安裝後移除，總之看人家文件怎麼寫我們就怎麼用。

安裝好了就可以run它

npm run storybook

storybook會開在6006這個埠號，如果npm run serve的話打開的就不是storybook，而是vue-cli的預設畫面。

左邊的sidebar是storybook自己產生的，接下來來看看怎麼引入bs還有設定sidebar。

引入custom booostrap

資料結構如下，設定story的部分放在component中：

your-project/
├── .storybook
│   └──preview.js
├── scss
│   └── custom.scss
├── node_modules/
│   └── bootstrap
├── src
   ├── assets
   ├── components
       ├── xxx.stories.js
       ├── xxx.vue
       ├── xxx.stories.js
       └── xxx.vue
   ├── App.vue // npm run serve會開啟的畫面
   ├── main.js

.storybook/preview.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.js'
import '../node_modules/bootstrap'

// 客製化scss
import '../scss/custom.scss'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

這樣就把bs給引入了，如果要純手刻css的話可以略過這個步驟。

建立storybook專用的vue

先隨便設定一個button.vue，記得要放在components下

// button.vue
<template lang="">
  <div>
    <h1>button</h1>
  </div>
</template>
<script>
export default {
  name: 'button'
}
</script>
<style lang="">
  
</style>

在同樣的結構下新增button.stories.js （後綴一定要.stories.js）

// 1.引入剛剛的Button.vue
import Button from "./Button.vue";

export default {
  //2. 設定sidebar title, Element會用粗體字, Button會是分頁
  title: "Element/Button",

  //3. import什麼就寫什麼
  component: Button,
};

//4. 設定Template
const Template = (args) => ({
  //5. import什麼就寫什麼
  components: { Button },

  setup() {
    //6. args是參數
    return { args };
  },

  //7. 一樣是import什麼就寫什麼，後面v-bind不更動
  template: '<Button v-bind="args" />',
});

通常這樣存檔好就會看到畫面了：

其他分頁像是color, font, input等等，都可以用以上方式新增頁面。
Button可能會有各種顏色的，接下來來看看怎麼做出Button的dropdown。這樣就可以看到色違的button。

進到button.vue中，把預計要呈現的html寫好設計好：

<div>
//藍色button
</div>

<div>
//橘色button
</div>

<div>
//灰色button
</div>

button.stories.js，在template後接著寫：

//1. Primary會是sidebar會呈現的標題
export const Primary = Template.bind({});
Primary.args = {
  //2. 設定參數
  color: "blue",
};

//3. 想要有幾個分頁就幾個
export const Secondary = Template.bind({});
Secondary.args = {
    color: "gray",
};

export const Special = Template.bind({});
Special.args = {
    color: "orange",
};

Button.vue

//2. 設定v-if，決定要呈現哪個DOM
<div v-if="color === 'blue'">
//藍色button
</div>

<div v-if="color === 'gray'">
//橘色button
</div>

<div v-if="color === 'orange'">
//灰色button
</div>

<script>
export default {
  name: "Button",

//1. 設定參數型別
  props: {
    color: String,
  },
};
</script>

就可以自由切換ㄌ~

不需要分頁

也不是每個元件都要區分大小或顏色，例如shadow或是主色輔色，這時候只需要新增xxx.stories.mdx，注意！是mdx哦，storybook有支援mdx檔，但其實我也不知道這是什麼（有這種技術文章作者ㄇ，有，就是我）

//shadow.stories.mdx

//1. 引入必要套件
import { Meta } from '@storybook/addon-docs';

//2. 反正寫Meta就對了，後面的title會告訴storybook這一頁要放在哪個標題下面
<Meta title="Element/Shadow" />

   //3. 你要呈現的DOM
  <div>
    <h2>Shadow</h2>
    <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
    <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
    <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
    <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
  </div>

shadow就不會有向下的箭頭，icon也是橘色的。