自动导入组件Nuxtjs不工作

Question

我很困惑为什么当我试图在我的视图中自动导入组件时，它没有在我的vue文件上工作，文档说链接你只需要将组件设置为nuxt.config.js文件中的true，我尝试过，但它不起作用，我是否正确导入自定义vue?

我的目录

Components
>Timeline.vue
>TimelineItem.vue

这将正常工作但我想自动删除import从脚本

<template id="timeline-template">
<ul class="timeline">
<li
is="TimelineItem"
v-for="(item, index) in items"
:key="index"
:item="item"
></li>
</ul>
</template>
<script>
import TimelineItem from './TimelineItem.vue'
export default {
components: { TimelineItem },
props: ['items'],
}
</script>

我只是像这样更新了我的脚本我只是删除了导入文件因为我想让它自动化

<script>
export default {}
</script>

然后在我的nuxt.config.js中我将组件设置为true

components: true,

这是我的TimelineItem.vue

<template id="timeline-item-template">
<li class="timeline-item">
<div class="timeline-badge" :class="item.icon_status">
<i :class="item.icon_class"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{ item.title }}</h4>
<div class="timeline-panel-controls">
<div class="controls">
<a
v-for="(control, index) in item.controls"
:key="index"
:control="control"
>
</a>
</div>
<div class="timestamp">
<small class="text-muted">{{ item.created }}</small>
</div>
</div>
</div>
<div class="timeline-body">{{ item.body }}</div>
</div>
</li>
</template>
<script>
export default {
props: ['item'],
}
</script>

更新我尝试使用<TimelineItem/>而不是使用is="TimelineItem，但它不起作用

<template id="timeline-template">
<ul class="timeline">
<TimelineItem v-for="(item, index) in items" :key="index" :item="item" />
</ul>
</template>
<script>
export default {
props: ['items'],
}
</script>

Answer 1

通过在components.js中导入TimelineItem修复了OP的问题!

一切正常，如预期。