javascript - VueJS不在 Electron 应用程序内部的DOM上呈现数据

Question

我有一个 Electron 项目，我正在其中实现vuejs。我能够加载vue脚本，并且浏览器窗口将正确打开包含使用 bootstrap 4制作的GUI的index.html文件。我注意到，vue实例将不处理vue使用的语法{{ hello }} 。我不知道问题出在哪里，但我认为这与 Electron 工作方式有关，会引起问题吗？

我已经使用npm install vue --save-dev安装了它，并且所有项目依赖项(例如bootstrap和jQuery)都使用相同的方法进行了安装。

这是我的代码

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

const 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);

index.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，而是在VUE数据中定义了message
用这个
var myapp = new Vue({ el: '#app', data: { hello: 'Hello Vue!' } });