单个文件组件无法在Electron应用程序中使用Vuejs呈现

Question

我一直在使用electron-webpack模块尝试使用vuejs运行项目。我开始使用他们的quick-start回购，看看我能不能让它运转起来。

我可以看到我的组件正在加载。他们似乎正在被巴贝尔处理。 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，它应该为webpack加载vue-loader，并允许我的组件处理成javascript，我相信这一步有效，我查看是否可以找到翻译我的模块在页面源中包含的renderer.js文件中。

项目的完整代码位于：https://github.com/counterbeing/electron-webpack-quick-start

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

Answer 1

您忘记在template文件中添加renderer/index.js媒体资源。

只需添加：

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

：）