2

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

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

4

2 回答 2

1

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...

于 2018-04-29T15:32:41.303 回答
0

像这样定义您的组件:

  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>
于 2018-04-29T18:48:11.390 回答