storybook使用

前言

最近在写基于Vue.js的组件，由于要测试组件，所以之前的办法是把所有的组件集中到一个网页中去显示，这样写起来发现很乱，没有规划。现在推荐大家使用storybook去做面向ui的 组件测试，storybook刚开始是为了 做Reactjs测试，目前也支持Vuejs.

安装

#全局安装storybook
yarn global add @storybook/cli

cd my-project

# 获取storybook支持
getstorybook

# 运行
yarn storybook

使用

安装完成之后，我们会发现我们src目录下面多出了stories这个文件夹并且还有一个index.stories.js和两个示例组件：

这时候我们可以编辑index.stories.js来添加我的组件:

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

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

storiesOf('Welcome', module).add('to Storybook', () => ({
  components: { Welcome },
  template: '<welcome :showApp="action" />',
  methods: { action: linkTo('Button') },
}));

此时，我们便搭建了一个最简单的storybook开发环境

要说的几点

个人感觉目前的storybook还不是很好用，主要有一下两点：

1. 我要为每个组件创建一个文件用于存放storybook的示例组件，如果有组件嵌套的情况会写很多的重复组件，目前我还没有找到合适的解决方法，如果有人知道请麻烦告知我，在这里谢谢了
2. 组件编译速度比较慢。之前不用storybook的时候从修改到页面显示差不多就一秒左右，加上storybook修改一个同样的组件差不多要3~5秒才能开到结果，还是比较影响开发效率的
   最后，期待storybook的后续更新可以带给我们更好更快的组件开发体验。