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 文件夹下添加简单的按钮组件：

然后在 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: 'Hello Button',
    methods: { action: action('clicked') },
  }))
  .add('with some emoji', () => ({
    components: { MyButton },
    template: '
原文来自:王下邀月熊
                        
声明：所有来源为“澳门太阳集团城网址8722”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com