时间戳

首页 > 解决方案 > 嵌套单文件组件 - 带有电子锻造的 vue.js

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

问题描述

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

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

标签： vue.jselectronelectron-forge

解决方案

So I have tried a few different things with no success, like using or even as the component names.

I also have tried these two ways of starting the vue:

The way you get with electron-forge const app = new Vue(App).$mount('#app')

and the way I learned new Vue({el: '#app', render: h => h(App)})

Nothing seems to work...

推荐阅读