javascript - 如何在 Storybook 中显示 Vue 组件

Question

所以我对 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>应用内联样式，但事实并非如此。

我在这里做错了什么？

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

标签： javascriptvue.jsstorybook