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

Question

夏天

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

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

我试过的

这是目录结构。

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

在components/home/index.vue中我添加了两个组件：输入和列表。

<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，将其设置为。

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，并直接在您的模板中使用它们。

您可以查看此存储库以了解有关自动导入组件功能的更多详细信息：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注解造成的

input/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>

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

How to add miultiple components in a single template in Nuxt Vue?

vue.js

vuejs2

nuxt.js

夏天

我试过的

显示一些代码