typescript - Storybook 显示 [Vue 警告]：未知的自定义元素：并且不挂载 Typescript 组件

Question

我正在尝试使用 Nuxt、Typescript 和 Storybook 制作一个项目。我有一个单一的组件，它是一个简单的按钮。但是，当我运行 Storybook 时，前两个故事的组件没有安装，并且我在控制台中收到以下错误：

[Vue 警告]：未知的自定义元素：<my-button> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我已经尝试过带有和不带有名称的组件，以及名称的变体。我试图将组件添加到每个故事中，但这会导致不同的错误。

我认为文件的方式或我包含打字稿的方式可能有问题，因为没有为组件加载样式/scss，我也没有得到错误。但这是以后的一个错误......

我的按钮.vue

<template>
  <button class="button-style" @click="onClick">
    <slot></slot>
  </button>
</template>

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

@Component({ name: 'MyButton' })
export default class MyButton extends Vue {

  @Emit('click')
  onClick(e){
    return e;
  }

}
</script>

<style lang="scss">
.button-style {
  border: 1px solid #eee;
  border-radius: 3;
  background-color: #FFFFFF;
  cursor: pointer;
  font-size: 15;
  padding: 3px 10px;
  margin: 10;
}
</style>

MyButton.stories.tsx

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';

import MyButton from './MyButton.vue';

storiesOf('MyButton', module)
  .add('with text', () => '<my-button>with text</my-button>')
  .add('with emoji', () => '<my-button>   </my-button>')
  .add('as a component', () => ({
    components: { 
        'my-button': MyButton 
    },
    template: '<my-button :rounded="true">rounded</my-button>',
    summary: 'Summary for MyButton'
  }));

webpack.config.ts

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      }
    ],
  });

  config.module.rules.push({
    test: /\.vue$/,
    loader: 'storybook-addon-vue-info/loader',
    enforce: 'post'
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
  });

  config.resolve.extensions.push('.ts', '.tsx', '.js');
  return config;
};

标签： typescriptvue.jsnuxt.jsstorybook