Vue+Electron implementiert einfache Desktop-Anwendungen

Dieser Artikel stellt hauptsächlich die Implementierung einfacher Desktop-Anwendungen mit Vue+Electron vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Ich habe C# verwendet Ich habe übrigens schon früher Desktop-Anwendungen geschrieben. Als ich mir kürzlich Node ansah, stellte ich fest, dass der häufig verwendete vscode in Elektronen geschrieben ist, und mir kam die Idee, zu versuchen, Krabben zu essen.

Ich habe im Internet nach Informationen über Electron gesucht, auch die offiziellen Dokumente studiert und festgestellt, dass die Electron-App tatsächlich ein Chrome-Browser ist und die Benutzeroberfläche vollständig mit webbasierter Technologie geschrieben ist, weil Vue dies getan hat wurde schon früher zum Schreiben einer Webanwendung verwendet, daher fällt mir natürlich die Kombination von Vue+Electron ein.

Ich habe online gesucht und ein fertiges Rad von Electron-Vue gefunden. Ich habe es jedoch am Ende nicht so zufriedenstellend gefunden, wie es immer der Fall war Später stellte ich schließlich fest, dass es am Netzwerk und am Konfigurationsproblem lag. Es bereitet den Menschen Kopfschmerzen.

Also habe ich mich schließlich entschieden, es selbst zu tun und die von Vue generierten statischen Webseiten mit Electron zu kombinieren.

1.Vue verwendet das Webpack-Projekt. Nach dem Erstellen wird eine statische Webseite im dist-Ordner generiert. Auf diese Weise kann auf die generierte Webseite zugegriffen werden, wenn sie im Webcontainer platziert wird Wenn der Referenzdateipfad direkt lokal geöffnet wird, tritt ein Fehler auf und es wird später festgestellt, dass der Grund darin liegt, dass sich die generierte index.html und die Ressourcen nicht in derselben Verzeichnisebene befinden.

Ändern Sie config/index.js im Webpack-Projekt in

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

2. Verwenden Sie Electron-Quick-Start, um schnell ein Electron-Projekt zu erstellen, und kopieren Sie die oben generierten Dateien in das Stammverzeichnis von Das Elektronenprojekt Führen Sie als Nächstes das Projekt aus und stellen Sie fest, dass es normal ausgeführt wird.

3. Der vorherige Schritt besteht jedoch nur darin, im Entwicklungsmodus auszuführen. Hier wird Electron-Builder verwendet, um das Projekt global zu verteilen. Geben Sie Electron-Builder --win ein. -ia32 --dir Die Verteilung des Projekts ist abgeschlossen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

vue So überwachen Sie, ob der Benutzer die Informationen beim Seitenwechsel geändert hat, nachdem er die Seitendetails erhalten hat

JS Asynchronous Programming Promise, Generator, async/await

Das obige ist der detaillierte Inhalt vonVue+Electron implementiert einfache Desktop-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!