VueJS 不在电子应用程序内的 DOM 上呈现数据

Question

我有一个电子项目，我正在其中实现 vuejs。我能够加载 vue 脚本，并且浏览器窗口将正确打开 index.html 文件，其中包含使用 bootstrap 4 制作的 GUI。我注意到 vue 实例不会处理{{ hello }}vue 使用的语法。我不知道问题出在哪里，但我认为这与电子工作方式有关，会导致 vue 出现问题？我已经使用它安装了它，npm install vue --save-dev并且所有项目依赖项（如 bootstrap 和 jQuery）都是使用相同的方法安装的。这是我的代码包.json 文件{  "name": "clients-manager",  "version": "1.0.0",  "description": "A simple hosting credentials manager app",  "main": "main.js",  "scripts": {    "start": "electron ."  },  "license": "ISC",  "dependencies": {    "bootstrap": "^4.4.1",    "dexie": "^2.0.4",    "jquery": "^3.4.1",    "popper.js": "^1.16.1",    "vue": "^2.6.11"  }}main.js Javascriptconst electron = require('electron');const { app, BrowserWindow } = electron;function createWindow(){  let win = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true    }  });  win.loadFile('index.html');  var myapp = new Vue({    el: '#app',    data: {      hello: 'Hello Vue!'    }  });  console.log(myapp);}app.whenReady().then(createWindow);索引.html<div class="col-4" id="app">  <ul class="nav ml-auto">    <li class="nav-item">      <a class="nav-link" href="#">{{ hello }}</a>    </li>  </ul></div>

Answer 1

你没有定义hello，你message 在 VUE 数据中定义

用这个

  var myapp = new Vue({

    el: '#app',

    data: {

      hello: 'Hello Vue!'

    }

  });

Answer 2

我使用 electron-vue 样板创建了一个项目。

你可以简单地用 npm 试试。

# Install vue-cli and scaffold boilerplate

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app

cd my-project

yarn # or npm install

yarn run dev # or npm run dev

更多信息请参考链接https://simulatedgreg.gitbooks.io/electron-vue/content/en/。