javascript - 单文件组件无法在 Electron 应用程序中使用 Vuejs 渲染

Question

我一直在使用 electron-webpack模块尝试让项目运行 vuejs 。我从他们的quick-start开始 repo ，看看我是否可以启动并运行它。

我可以看到我的组件正在加载。它们似乎是由 babel 处理的。 Vue 甚至运行起来，我可以在 vue 开发者工具中看到根组件。但是，当我尝试使用单个文件组件时，按照我看到其他人使用它们的方式，没有任何渲染。

index.vue(主文件)

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: "#app",
  components: { App }
})

App.vue

<template>
  <div id="main">
    <h1>Main View</h1>
    <jester />
  </div>
</template>

<script>
  import Jester from './jester.vue'

  export default {
    name: 'app',
    components: { jester: Jester },
    data () {
      return {
      }
    }
}
</script>

jester.vue

<template>
  <p>This is the Jester component {{something}}</p>
</template>

<script>
export default {
  name: 'jester',
  data () {
    return {
      foo: 'bar'
    }
  }
}
</script>

我无法理解为什么会加载空白页面。我正在使用推荐的electron-webpack-vue应该加载 vue-loader对于 webpack，并允许我的组件被处理为 javascript，并且我相信该步骤有效，我检查了是否可以在 renderer.js 中找到我的模块的翻译文件包含在页面源代码中。

该项目的完整代码在这里:https://github.com/counterbeing/electron-webpack-quick-start

如果你想尝试运行它，你应该能够克隆它，然后运行 ​​yarn; yarn dev

Answer 1

您忘记添加template您的属性(property)renderer/index.js文件。

只需添加:

new Vue({
el: "#app",
template: '<App/>',
components: { App }
})

:)