Storybook for vue - 前端ui組件管理神器

一、簡介

　　Storybook是一款開源的組件開發工具，它可以運行在主程序之外，因此開發者可以用它來獨立開發UI組件，或者用它來快速構建ui組件文檔。

　　目前Storybook支持的框架有：

• React
• React Native 
• Vue
• Angular
• Marionette.js
• Mithril
• Marko
• HTML
• Svelte
• Riot
• Ember
• Preact
• Rax

　　

　　可以看到，Storybook的功能是相當豐富的。本文將以Vue為例，從零開始搭建一個自己的Storybook。

二、安裝Storybook

　　首先自己創建一下文件夾，storybook-demo。

　　官方文檔中給的安裝方式有2種，第一種是自動化安裝，有點類似vue的腳手架，它會自動將環境配置好，開發者無需手動初始化相關配置文件。

npx -p @storybook/cli sb init --type vue

　　第二種是可以手動進行配置，讀者可以參照官網的教程來進行安裝。附送地址：https://storybook.js.org/docs/guides/guide-vue/。

 

　　但是筆者經過嘗試，使用官方的方法安裝的時候會缺少部分依賴導致運行失敗，下面將介紹一下筆者自己使用的安裝方法。

　　首先，安裝vue腳手架，然后初始化項目:

vue create storybook-demo

　　

　　

　　選擇babel和css預處理， 並且在第三部選擇安裝node-sass，這幾項是必須的，其他可根據需要進行選擇。　　

　　

　　腳手架安裝完成后，刪除無關文件，並在根目錄下新建.storybook、stories文件夾，在.storybook下新建以下文件：addons.js、main.js、config.js、webpack.config.js。完成之后目錄如下：

　　

　　下面再進行storybook的相關安裝。

　　安裝storybook for vue:

npm install @storybook/vue --save-dev

　　在根目錄下找到package.json文件並配置引導：

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

　　當然，你也可以在后面跟上-p port來設置默認端口號，如：

{
    "scripts": {
      "storybook": "start-storybook -p 6006"
    }
}

　　在根目錄下新建.storybook文件夾，並在里面新建main.js文件，進行相關配置：

module.exports = {

　　stories: ['../stories/**/*.stories.js', '../stories/*.stories.js']

};

　　這樣系統就會自動解析src目錄下的*.stories.js、*.stories.ts文件了。

　　之后，在根目錄下新建src文件夾，在里面新建index.stories.js文件並編寫自己的組件：

import Vue from 'vue';
import MyButton from './Button.js';

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>'
});

　　Button.js（由於這里沒有安裝vue文件的解析依賴，所以只能用js文件來進行代替，如果想引入vue來代替js，可自行安裝相關loader）:

export default {
  name: 'my-button',

  data() {
    return {
      buttonStyles: {
        border: '1px solid #eee',
        borderRadius: 3,
        backgroundColor: '#FFFFFF',
        cursor: 'pointer',
        fontSize: 15,
        padding: '3px 10px',
        margin: 10,
      },
    };
  },

  template: `
    <button :style="buttonStyles" @click="onClick">
      <slot></slot>
    </button>
  `,

  methods: {
    onClick() {
      console.log('click');
      this.$emit('click');
    },
  },
};

　　這樣，一個簡單的storybook就搭建完成了。在命令行輸入：

npm run storybook

　　就會自動打開剛才的storybook。

　　

三、storybook的插件 - addons

　　通過上面的搭建可以看到，我們自己搭建的storybook與一開始的看到的圖片簡直就是買家秀和賣家秀的區別。這是因為在storybook中，它提供了很多插件供開發者使用，開發者可以使用addons給每個story增加額外的功能，如使用文檔、查看源碼、查看事件等，使每個story的功能更加豐富。

　　storybook自帶的addons已足夠使用，當然官方也提供了相關api可以讓開發者編寫自己的addon，具體實現可移步到官方文檔中進行查看。

　　官方自帶的addons可參考：

　　https://storybook.js.org/addons/

　　https://github.com/storybookjs/storybook/tree/master/addons

　　當然，使用addons之前必須先到https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md查看相關addon是否支持當前框架，比如說info插件就只支持react但是不支持vue，之前筆者還在這里研究了半天為什么info一直配置失敗。

　　下面介紹幾個筆者自己用過的addon以及配置方法，其他addon可照貓畫虎，根據官方文檔給的參數進行配置即可。

　　1. story-source - 查看當前story源碼

　　安裝：

npm i @storybook/addon-storysource --save-dev

　　配置：

　　.storybook/main.js

const path = require("path");
module.exports = {
  stories: ["../stories/**/*.stories.js", "../stories/*.stories.js"],
  addons: [
    {
      name: "@storybook/addon-storysource",
      options: {
        rule: {
          // test: [/\.stories\.jsx?$/], This is default
          include: [path.resolve(__dirname, "../stories")], // 找到自己存放stories的文件夾
        },
        loaderOptions: {
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
  ],
};

　　其中，loaderOptions的默認值為：

{
  printWidth: 100,
  tabWidth: 2,
  bracketSpacing: true,
  trailingComma: 'es5',
  singleQuote: true,
}

　　在.storybook/addons.js里面進行插件注冊：

import '@storybook/addons';
import '@storybook/addon-storysource'

　　到這里就可以了，重新運行一下看一下結果：

　　

　　

　　2. readme - 當前組件的文檔說明

　　

　　安裝：

npm install --save-dev storybook-readme

　　注冊：

　　.storybook/addons.js

import 'storybook-readme/register';

　　配置：

　　這里可分為全局配置和局部配置，全局配置可以在.storybook/config.js里面進行相關配置，局部配置可在制定的*.stories.js文件里進行配置。區別如下：

　　全局配置需調用以下方法：

import { addDecorator } from '@storybook/vue';
import { addReadme, configureReadme } from 'storybook-readme';

configureReadme({
    // ...some code
});

addDecorator(addReadme);

　　局部配置：

import { storiesOf } from "@storybook/vue";

import MyButton from "./MyButton.vue";
import ButtonReadme from "./MyButton.md";
storiesOf("Demo", module)
  .addParameters({
    readme: {
      codeTheme: "duotone-sea",
      content: ButtonReadme,
      sidebar: ButtonReadme,
    }
  })
  .add("Button", () => {
    return {
      components: {
        MyButton,
      },
      template: `<my-button type="primary">My Button</my-button>`,
    };
  });

　　由於這個addon是沒有官方文檔的，筆者花了好長時間才找到一個開源文檔，可移步到https://github.com/tuchk4/storybook-readme進行參考，里面也有相關demo可以查看。

　　稍微解釋一下里面各方法參數的作用：

configureReadme({
  /**
   * Wrapper for story. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  // 組件區域的預處理，相當於在組件展示的時候外面套上一層div，組件作為插槽插入到這個div里面，在這里可以設置div的樣式，如果是使用vue的話可以以vue組件格式插入，下面同理
  StoryPreview

  /**
   * Wrapper for content and sidebar docs. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  // 文檔部分的樣式，即插件里面的content
  DocPreview/**
   * Wrapper for header docs. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  HeaderPreview/**
   * Wrapper for footer docs. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  FooterPreview

  /**
   * Header docs in markdown format
   */
  header: '',

  /**
   * Footer docs in markdown format
   */
  footer: '',
});

　　

 　　不理解preview的可以看一下上圖，比如header的內容就為“用戶交互組件demo”，headerPreview就是下面那層border，如果有將readme注冊到addons.js里面，在綠色方框里還會有一個readme選項，可以查看文檔。

　　在給特定story添加readme的時候，可以看到可以添加兩個文檔，如：

storiesOf("Demo", module)
  .addParameters({
    readme: {
      codeTheme: "duotone-sea",
      content: ButtonReadme,
      sidebar: ButtonReadme,
    }
  })
  .add("Button", () => {
    return {
      components: {
        MyButton,
      },
      template: `<my-button type="primary">My Button</my-button>`,
    };
  });

　　其中，這里可能會有讀者不理解。里面是content是對應圖中紅色方框的內容，sidebar則是對應綠色方框里的內容（如果有注冊），codeTheme是md文檔的樣式，可自行設置。

　　這里還有一個小技巧，就是在編寫content的時候，可以在文檔中插入以下代碼：

<!-- STORY -->

　　這段代碼可以控制我們的組件要在文檔的哪個部分出現。如果不填寫，則默認會先顯示文檔內容，再顯示組件內容。所以我們最好在文檔的最前面先添加上述代碼，先將我們的組件展示出來，再進行文檔編寫。

 

　　這就是筆者目前用過的兩個addon了，其他addons讀者可以自己嘗試，可以讓自己的storybook更加個性化，功能更加完善。