單文件組件無法在Electron應用程序中使用Vuejs渲染

Question

我一直在使用electron-webpack模塊來嘗試使用vuejs運行一個項目。 我從他們的快速入門回購開始 ，看是否可以啟動並運行它。

我可以看到我的組件正在加載。 它們似乎正在由通天塔處理。 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 yarn; yarn dev

Answer 1

您忘記將template屬性添加到renderer/index.js文件中。

只需添加：

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

:)