Storybook 3.2 引入 Vue.js 支持

Storybook 3.2 引入 Vue.js 支持從屬於筆者的前端每週清單系列，更多 Vue.js 相關資料參考 Vue.js 學習實踐資料索引。

Vue.js Storybook

在 React 開發中咱們已經習慣了使用 Storybook 來進行組件交互式開發與預覽，也就是所謂的 Storybook Driven Development；而在近日發佈的 Storybook 3.2版本中，其引入了對於 Vue.js 的支持。這裏咱們爲筆者的基於 Webpack 3 的 Vue.js 工程項目腳手架添加 Storybook 支持：

# 安裝 Storybook 依賴
npm i -g @storybook/cli
cd my-vue-project

# 項目目錄下獲取 Storybook
getstorybook

# 運行 Storybook
npm run storybook

咱們在 src/component 文件夾下添加簡單的按鈕組件：

<template>
  <button class="button-styles" @click="onClick">
    <slot>Fallback Content</slot>
  </button>
</template>

<script>
  export default {
    name: 'my-button',
  
    methods: {
      onClick () {
      }
    }
  }
</script>

<style>
  .button-styles {
    border: 1px solid #eee;
    border-radiuas: 3px;
    background-color: #FFFFFF;
    cursor: pointer;
    font-size: 15pt;
    padding: 3px 10px;
    margin: 10px;
  }
</style>

而後在 src/stories 目錄下，能夠利用 Storybook 提供的接口註冊 Story:

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import MyButton from '../component/MyButton.vue';

storiesOf('Button', module)
  .add('with text', () => ({
    components: { MyButton },
    template: '<my-button @click="action">Hello Button</my-button>',
    methods: { action: action('clicked') },
  }))
  .add('with some emoji', () => ({
    components: { MyButton },
    template: '<my-button @click="action">? ? ? ?</my-button>',
    methods: { action: action('clicked') },
  }));

最後在 .storybook/config.js 文件中指明 stories 的配置地址：

import { configure } from '@storybook/vue'

function loadStories() {
  require('../src/stories')
}

configure(loadStories, module)

咱們也能夠自定義 Webpack 配置，在 .storybook 中添加 webpack.config.js:

// @flow

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        context: '/',
        postcss: [
          autoprefixer({
            browsers: [
              'ie >= 9',
              'ie_mob >= 10',
              'ff >= 30',
              'chrome >= 34',
              'safari >= 7',
              'opera >= 23',
              'ios >= 7',
              'android >= 4.4',
              'bb >= 10'
            ]
          }),
          require('postcss-flexibility')
        ]
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

一樣的，也可使用 Storybook 豐富的插件系統：

// @flow

import { configure, setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';
import { setOptions } from '@storybook/addon-options';

setAddon(infoAddon);

# 設置 全局信息展現
setOptions({
  name: 'fractal-components',
  url: 'https://github.com/wxyyxc1992/fractal-components',
  showDownPanel: false
});


function loadStories() {
  ...
}


configure(loadStories, module);