如何在 Storybook 中显示 Story

Posted 2023-02-19

【中文标题】如何在 Storybook 中显示 Story

【英文标题】：How to display Story in Storybook

【发布时间】：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

【参考方案1】：

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

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

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