如何在 Nuxt Vue 的单个模板中添加多个组件？

Question

夏天

我尝试创建一些示例 Vue Nuxt SPA。
在一个组件中，我添加了其他两个组件。
结果浏览器上什么也没有显示。

我想知道如何修复它并正确显示输入功能。

我试过的

这是目录结构。

project
  ├ pages
  │  └ index.vue
  ├ components
  │  ├ home
  │  │  └ index.vue
  │  ├ input
  │  │  └ index.vue
  │  └ list
  │     └ index.vue
  .
  .

在components/home/index.vue 中我添加了两个组件：Input 和 List。

<template>
  <div>
    <Input/>
    <List/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import Input from '~/components/input/index.vue';
import List from '~/components/list/index.vue';

@Component({
  layout: 'default',
  components: {
    Input,
    List,
  },
})
export default class Home extends Vue {}
</script>

因此，浏览器上没有显示任何内容。

显示一些代码

这里是 Github 存储库，请查看。 https://github.com/jpskgc/vue-nuxt-spa-sample/tree/multiple-components

Answer 1

转到nuxt.config.js，设置为shown here。

export default {
  components: [
    {
      path: '~/components', // will get any components nested in let's say /components/test too
      pathPrefix: false,
    },
  ]
}

这样，您将获得自动导入组件。然后，您将能够将组件直接重命名为 Home.vue、Input.vue 和 List.vue，并直接在模板中使用它们。

您可以查看此 repo 以了解有关自动导入组件功能的更多详细信息：https://github.com/nuxt/components

阅读这篇文章，更好地解释自动导入的含义：https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components

如果你需要一些关于如何命名和组织你的组件的指南，你可以参考这个：https://vueschool.io/articles/vuejs-tutorials/how-to-structure-a-large-scale-vue-js-application/

Answer 2

发现是缺少@component注解造成的。

输入/index.vue

<template>
  <v-text-field label="Main input" :rules="rules" hide-details="auto" />
</template>

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

@Component # <- add it.
export default class Input extends Vue {}
</script>

list/index.vue

<template>
  <div>List</div>
</template>

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

@Component # <- add it
export default class List extends Vue {}
</script>