因此,我对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>
应用于行内样式,但事实并非如此。
我在这里怎么了?
我认为这无关紧要,只是以防万一,这是我的文件夹结构的外观: