嵌套的单个文件组件 - 带有电子伪造的vue.js

Question

我第一次尝试电子，我被它吹走了。不过，当我尝试使用电子伪造使用单个文件vue.js组件时，我已经撞墙了。我的问题如下：

我使用vue.js模板创建一个项目并运行它。工作，看起来很棒。我有一个文件页面，其索引文件如下所示：

<div id="test"></div>
</body>

<script>
import Vue from 'vue';
import Test from './test';

const app = new Vue(Test).$mount('#test');

app.text = "Electron Forge with Vue.js!";

</script>

到目前为止，这么好。它导入Test，它是一个单独的文件组件并呈现它。

现在，我希望在此主要组件中嵌套其他单个文件组件。例如，我想在我的app文件test.vue

中有以下内容

<template>
<h2>Hello from {{text}}</h2>
</template>

<script>
import About from './About.vue'

export default {
components: {
          appAbout: About,
      },
data () {
  return {
     text: 'Electron'
  }
}
}
</script>

再次，到目前为止一切顺利。我可以运行应用程序没有错误，因此正在导入组件。

这就是我的问题：如果我现在尝试使用<appAbout></appAbout>渲染组件，就像我之前在使用vue.js的web应用程序中所做的那样，我会收到以下错误。

它基本上说我在组件中没有使用单个根元素，这很奇怪，因为我的组件看起来像这样：

<template lang="html">
<div>Hello from component</div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

我被困住了。有人可以帮忙吗？

Answer 1

所以我尝试了一些不同的东西但没有成功，比如使用甚至作为组件名称。

我也尝试了这两种启动vue的方法：

电子伪造的方式 const app = new Vue(App).$mount('#app')

和我学习的方式 new Vue({el: '#app', render: h => h(App)})

似乎没什么用......

Answer 2

像这样定义你的组件：

  export default {
    components: {
      'app-about': About
    }
  }

然后在这样的模板中使用它（使用kebab-case）：

<app-about></app-about>

关于编译模板错误，您需要将test.vue中的所有内容包装在根元素中：

<template>
  <div>
    <h2>Hello from {{text}}</h2>
    <app-about></app-about>
  </div>
</template>