VueJS не отображать данные о DOM внутри электронного приложения

Question

У меня есть электронный проект, в котором я реализую vuejs внутри него. Я могу загрузить скрипт vue, и окно браузера правильно откроет индекс. Файл html, содержащий GUI, созданный с использованием bootstrap 4. Я заметил, что экземпляр 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);

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, вы определили message в VUE Данные

используйте это

var myapp = new Vue({ el: '#app', data: { hello: 'Hello Vue!' } });

Answer 2

Вы пытаетесь использовать Vue внутри HTML файла. Правильный способ - это отобразить файл приложения. vue следующим образом:

import App from './App.vue'
new Vue({
     render: h => h(App)
}).$mount('#app')

Возможно, вы неправильно настроили проект Vue. Убедитесь, что вы используете vue -cli для облегчения разработки. Вы можете использовать шаблон стартера, например https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html, чтобы быстрее настроить свой проект.