1.vue-VerpackungHier verwenden wir den Befehl „vue native packaging“, um das Vue-Projekt zu verpacken
2. Electron konfigurierenDie Verwendung von Electron zum Erstellen von Desktop-Anwendungen erfordert zwei Konfigurationsdateien 1.paket.json Erstellen Sie eine Datei package.json und fügen Sie den folgenden Code ein { "name": "demo", //Projektname "productName": "demo", "author": "Autor", "version": "1.0.4", "main": "main.js", "description": "Projektbeschreibung", "Skripte": { "start": "electron .", //Starte das Electron-Projekt "pack": "electron-builder --dir", "dist": "Elektronenbauer", "postinstall": "Electron-Builder-App-Deps installieren", "packager": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //Packe das Projekt in eine EXE-Datei}, "bauen": { "electronVersion": "2.0.18", "gewinnen": { "requestedExecutionLevel": "höchster verfügbarer Wert", "Ziel": [ { "Ziel": "nsis", "Bogen": [ "x64" ] } ] }, "appId": "Demo", "Artefaktname": "Demo-${version}-${arch}.${ext}", "nsis": { "Artefaktname": "Demo-${version}-${arch}.${ext}" } }, "Abhängigkeiten": { "core-js": "^2.4.1", "Elektronen-Updater": "^2.22.1" }, "devAbhängigkeiten": { "Elektronenpaketierer": "^12.1.0", "Elektronenbauer": "^20.19.2" } } 2.mian.js Erstellen Sie main.js und fügen Sie den folgenden Code ein [Hinweis] win.webContents.openDevTools(); Dieser Code bedeutet, dass das Debug-Fenster geöffnet wird. Er muss beim Generieren einer EXE-Datei auskommentiert werden. onst {app, BrowserWindow} =require('electron'); //Elektron einführen gewinnen lassen; const Pfad = require('Pfad') let Fensterkonfiguration = { Breite: 800, Höhe:600, Webeinstellungen: {preload: Pfad.resolve(__dirname, 'electron-preload.js')} }; //Fensterkonfigurationsprogramm mit Fenstergrößenfunktion createWindow(){ win = new BrowserWindow(windowConfig); //Ein Fenster erstellen win.loadURL(`file://${__dirname}/index.html`); //Der im Fenster index.html anzuzeigende Inhalt ist das gepackte, generierte index.html win.webContents.openDevTools(); //Debugging-Tools öffnen win.on('close',() => { //BrowserWindow-Objekt wiederverwenden win = null; }); win.on('Größe ändern',() => { gewinnen.reload(); }) } app.on('bereit',Fenster erstellen); app.on('geladen',()=>{ konsole.log("aaa") }); app.on('Fenster-alle-geschlossen',() => { app.quittieren(); }); app.on('aktivieren',() => { wenn(gewinnen == null){ Fenster erstellen(); } }); const { ipcMain } = erfordern('Elektron') ipcMain.on("ping",Funktion(gerade,Argument){ console.log(arg) sogar.Rückgabewert = "pong" }) 3. Legen Sie die Dateien package.json und main.js in das Verzeichnis dist des Vue-Pakets 4. Öffnen Sie das Knoten-Befehlsfenster im Verzeichnis dist und führen Sie npm install oder cnpm install aus, um Abhängigkeiten herunterzuladen
5. Nachdem die Abhängigkeiten erfolgreich heruntergeladen wurden, führen Sie npm start aus, um das Projekt zu starten und zu prüfen, ob das Projekt erfolgreich ausgeführt wird
Das Ergebnis nach erfolgreicher Operation: 6. Wenn nach dem Ausführen kein Fehler gefunden wird, führen Sie npm run packager aus, um das Projekt in eine EXE-Datei umzuwandeln. Nach erfolgreicher Produktion wird das Installationspaket der Desktopanwendung im aktuellen Verzeichnis generiert
Ordner nach erfolgreicher Verpackung Klicken Sie auf die EXE-Datei, um die Anwendung direkt zu öffnen. Dies ist das Ende dieses Artikels über die Erstellung von Desktop-Anwendungen mit Vue + Electron. Weitere relevante Inhalte zu Vue Electron-Desktop-Anwendungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Vergleich der Verwendung von Formularelementattributen schreibgeschützt und deaktiviert
>>: So verstecken Sie RAR-Dateien in Bildern
MySQL 5.7 fügt viele neue Funktionen hinzu, wie z...
Der Code sieht folgendermaßen aus: <!DOCTYPE h...
Inhaltsverzeichnis MySQL Master-Slave-Replikation...
Hintergrund Als ich heute mit anderen Projektteam...
Vorne geschrieben Kürzlich berichtete mir ein Les...
Nach der Installation der neuesten Version 8.0.11...
Inhaltsverzeichnis 1. ACID-Eigenschaften Syntax d...
Dieser Artikel stellt ein Beispiel für die Verwen...
React entstand als internes Projekt bei Facebook....
Inhaltsverzeichnis 1. Übersicht 2. nginx.conf 1) ...
MySQL zeichnet zeitaufwändiges SQL auf MySQL kann...
1. Überprüfen Sie den Zeichensatz des standardmäß...
Methode join(): verbindet alle Elemente eines Arr...
KDE Abkürzung für Kool Desktop Environment. Eine ...