如何在Storybook中显示Vue组件

时间:2019-11-21 09:00:34

标签: javascript vue.js storybook

因此,我对Storybook与Vue的工作方式感到困惑(我之前已将其与React结合使用,并设法使其工作)。

到目前为止,我已经正确安装了它。例如,我有一个1-Button.stories.js文件,看起来像这样:

import Button from '../src/components/Test';

export default {
  title: 'Button',
};

export const text = () => ({
  components: { Button },
  template: '<button-counter></button-counter>',
});

现在,这将渲染到Storybook,但仅渲染模板。如何获取它来渲染组件,即Button

这是Button中我的Test.vue的样子:

// Define a new component called button-counter
export const Button = Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" v-on:click="count++">You clicked me {{ count }} times.</button>'
})

我希望它起作用的方式是将<button-counter>应用于行内样式,但事实并非如此。

我在这里怎么了?

我认为这无关紧要,只是以防万一,这是我的文件夹结构的外观:

enter image description here

0 个答案:

没有答案