storybook在vue中的基本使用

发表于 | 更新于

在开发过程中我们时常需要抽离很多公共组件出来，于是需要一个方式或者平台将组件以及他们的用法展示出来。
Storybook是UI组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。
官网：https://storybook.js.org/

官方解释’故事’：

故事书是故事的集合。每个故事代表组件的单个视觉状态,技术上讲，一个故事是一个函数，它返回一些可以被渲染到屏幕上的东西。

step 1: 安装依赖

a、添加 @storybook/vue 到你的项目中

1
npm i @storybook/vue --save-dev

b、添加 @storybook相关依赖

1
2
npm install vue --save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

step 2: 新增一个npm脚本

在package.json中新增一个 NPM脚本用以启动storybook

1
2
3
4
5
{
    "script": {
        "storybook": "start-storybook"
    }
}

step 3: 创建storybook相关的配置文件

一般建议storybook配置文件夹(.storybook)放在最外层，当然你也可以放到任意你想放的位置。
对于storybook的基本配置，唯一需要做的是告诉storybook在哪里去找到故事，所以新建一个config文件，内容为

1
2
3
4
import { configure } from '@storybook/vue';

//自动引入src目录下以.stories.js结尾的所有文件
configure(require.context('../src', true, /\.stories\.js$/), module);

您可能正在使用全局组件或vue插件（例如vuex），在这种情况下，您需要在config.js文件中注册它们

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { configure } from '@storybook/vue';

import Vue from 'vue';

// Import Vue plugins
import Vuex from 'vuex';

// Import your global components.
import Mybutton from '../src/stories/Button.vue';

// Install Vue plugins.
Vue.use(Vuex);

// Register global components.
Vue.component('my-button', Mybutton);

configure(require.context('../src', true, /\.stories\.js$/), module);

上面示例注册了您的自定义Button.vue组件，安装了Vuex插件，并加载了../src/index.stories.js中定义的Storybook故事。 在调用configure（）之前，应注册所有自定义组件和Vue插件

step 4: 创建你的stories

现在创建一个存放story的./stories目录，并创建你的第一个故事(stories/index.js)

CSF(Component Story Format)创建story： 
1
2
3
4
5
6
7
8
9
10
import Vue from 'vue';
import MyButton from './Button.vue';

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>'
});
storiesOf API 创建： 
1
2
3
4
5
6
7
8
9
10

import Vue from "vue";
import { storiesOf } from '@storybook/vue'
import HelloWorld from "@/components/HelloWorld.vue";

//storiesOf API 5.2以后就不建议使用 
storiesOf("Hello", module).add("HelloWorld", () => ({
	components: { HelloWorld },
	template: `<hello-world/>`
}));

导出：将故事书导出为静态应用

Storybook附带有一个工具，可将您的Storybook导出到静态Web应用。然后可以将其部署到GitHub页面或任何静态托管服务上。
只需要简单的添加下面运行脚本

1
2
3
4
5
{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

storybook常用组件使用

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

1、常用组件安装： 
1
npm add -D @storybook/addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes storybook-readme

2、建立配置文件，注册插件 .storybook/addons.js：

1
2
3
4
5
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';
import 'storybook-readme/register';
import '@storybook/addon-docs/register';

3、安装组件并配置参数
a、全局安装：.storybook/config.js 中通过 addDecorator(addon) 安装
b、story安装：在某个 *.stories.js 中 storiesOf(‘XXX’, module).addDecorator(addon) 安装

部分插件还需要进行参数的配置 这就会用到 addParameters() 方法
a、全局安装：.storybook/config.js 中通过 addParameters({[addonKey]: addonParam}) 追加
b、story安装：在某个 *.stories.js 中 storiesOf(‘XXX’, module).addParameters({[addonKey]: addonParam}) 追加

缺点

1、Addon太多，管理有些混乱
2、支持UI框架多，但是有的Andon却不是所有UI框架都支持，比如info，具体可参见官方文档
3、大版本之间变化大，从网上找到的示例代码比较

入门易、深耕难，StoryBook亦是如此，这需要开发人员提升组件化思维，并结合更多的实践，才能让它更好的助力前端开发。