使用 StoryBook 搭建 UI 组件库

发表于 | 分类于

storybook文档
Storybook 3.2 引入 Vue.js 支持
一个完整的Vue例子

使用 StoryBook 搭建 UI 组件库

StoryBook 为UI组件开发提供开发环境，你可有实现不同状态下的UI可视化，并且可以实现交互。

实现 Vue UI 组件库

初始化项目

vue init webpack my-vue-project. // 通过 vue cli 初始化项目

cd my-vue-project

npm i -g @storybook/cli // 全局安装 storybook

getstorybook // 生成

npm run storybook //运行

Writing Stories

我们在 src/component 文件夹下添加简单的按钮组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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') },
  }));

效果图

image-20181026164700767

总结

StoryBook 可以在原有的项目上进行构建，是独立的，并不影响原有项目；

更多的是作为单独的UI组件库使用，实现UI可视化，交互，日志输出，文档输出等功能。