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

索引.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 数据中定义用这个&nbsp; var myapp = new Vue({&nbsp; &nbsp; el: '#app',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; hello: 'Hello Vue!'&nbsp; &nbsp; }&nbsp; });

Answer 2

我使用 electron-vue 样板创建了一个项目。你可以简单地用 npm 试试。# Install vue-cli and scaffold boilerplatenpm install -g vue-clivue init simulatedgreg/electron-vue my-project# Install dependencies and run your appcd my-projectyarn # or npm installyarn run dev # or npm run dev更多信息请参考链接https://simulatedgreg.gitbooks.io/electron-vue/content/en/。