Question

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

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

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

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

MyButton.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';
  borderRadius: 3;
  backgroundColor: '#FFFFFF';
  cursor: 'pointer';
  fontSize: 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;
};

Answer 1

好的，我已经通过查看具有功能的仅nuxt的项目来设法解决了这个问题。通过“解决”，我的意思是我将这个特定的错误消息换成了一系列不同的错误消息，而我最初的项目目标却没有实现。对于以后引用我的代码的任何人，请谨慎操作。

从头开始一个新的nuxt项目。使用了nuxt 2.4.1，因为这在我的其他功能项目中都起作用（2.8.1中有css加载问题）。添加了打字稿。
主索引页面不在打字稿中。固定。
我的文件路径错误。更新了相对导入，调整了tsconfig.json映射，现在〜/路径可以使用了。

3可能是主要问题。但是如上所述，我现在还有其他与模块未加载有关的错误。我更新到nuxt 2.8.1看看是否有帮助，但是它只会更改我收到的消息。

故事书显示[Vue警告]：未知的自定义元素：<my-button>并且未安装Typescript组件

1 个答案: