嵌套单文件组件 - 带有电子锻造的 vue.js答案

【问题标题】：Nested single file components - vue.js with electron-forge嵌套单文件组件 - 带有电子锻造的 vue.js
【发布时间】：2018-10-09 13:44:15
【问题描述】：

我第一次尝试电子，我被它震撼了。不过，在尝试使用电子锻造的单个文件 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，它是一个单一的文件组件并呈现它。

现在，我想在这个主组件中嵌套其他单个文件组件。例如，我想在我的名为 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>

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

【问题讨论】：

添加<appAbout> 元素后，Test.vue 中的新模板是什么？
没什么，我把它放在
之后。
如果我运行与 web 应用程序完全相同的代码，它就像一个魅力。
嗯，我刚刚注意到脚手架使用 ./test 没有 .vue 扩展名，现在我迫不及待地想拿到我的机器上测试它。
@BorjaRojano 不要在模板中使用 camelCase：

标签： vue.js electron electron-forge

【解决方案1】：

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

我也试过这两种启动vue的方式：

您使用电子锻造的方式 const app = new Vue(App).$mount('#app')

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

似乎没有任何效果...

【讨论】：

【解决方案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>

【讨论】：

之后。