如何在 Storybook 中显示 Story答案

【问题标题】：How to display Story in Storybook如何在 Storybook 中显示 Story
【发布时间】：2021-12-31 13:11:21
【问题描述】：

夏天

我尝试在 Nuxt.js 应用程序中实现 Storybook。
我成功运行了 Storybook。我写了index.vue 和index.stories.ts。
但是故事书没有显示任何故事。

所以我想知道如何实际显示 Story。

显示一些代码

index.vue

<template>
  <nuxt-link to="https://nuxtjs.org">
    NuxtJs
  </nuxt-link>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class TestComponent extends Vue {}
</script>

index.stories.ts

import Test from './index.vue'

export default {
  component: Test,
  title: 'Components/Test'
}

export const Component = () => ({
  components: { Test },
  template: '<Test />'
})

我还写了./storybook/config.js 进行设置。

import { configure } from '@storybook/vue';

const req = require.context('../components', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => {
    return req(filename)
  });
}

configure(loadStories, module);

这是实际的存储库。请检查。 https://github.com/jpskgc/nuxt-sample/tree/storybook-error

【问题讨论】：

标签： vue.js nuxt.js storybook

【解决方案1】：

我通过添加 .storybook/main.js 而不是 .storybook/config.js 解决了这个问题。

module.exports = {
  stories: ['../components/**/*.stories.ts'],
};

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-configure

【讨论】：