Beispielcode zum Erstellen von Desktop-Anwendungen mit Vue + Electron

Beispielcode zum Erstellen von Desktop-Anwendungen mit Vue + Electron

1.vue-Verpackung

Hier verwenden wir den Befehl „vue native packaging“, um das Vue-Projekt zu verpacken

npm-Ausführung erstellen

2. Electron konfigurieren

Die 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

Bildbeschreibung hier einfügen

4. Öffnen Sie das Knoten-Befehlsfenster im Verzeichnis dist und führen Sie npm install oder cnpm install aus, um Abhängigkeiten herunterzuladen

npm installieren

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

npm starten

Das Ergebnis nach erfolgreicher Operation:

Bildbeschreibung hier einfügen

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

npm-Paketer ausführen

Ordner nach erfolgreicher Verpackung

Bildbeschreibung hier einfügen

Klicken Sie auf die EXE-Datei, um die Anwendung direkt zu öffnen.

Bildbeschreibung hier einfügen

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:
  • Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt
  • So starten Sie ein Vue.js-Projekt
  • Die Implementierungsidee zum Hinzufügen einer Startladeanimation zum Electron-Vue-Projekt

<<:  Vergleich der Verwendung von Formularelementattributen schreibgeschützt und deaktiviert

>>:  So verstecken Sie RAR-Dateien in Bildern

Artikel empfehlen

Komprimierungs- und Optimierungsvorgänge für Docker-Images

Der Grund für die heutige Beliebtheit von Docker ...

Implementierung der CommonJS-Modularität in Browsern ohne Kompilierung/Server

Inhaltsverzeichnis Einführung 1. Was ist one-clic...

CSS imitiert den sanften Umschalttasteneffekt von Apple

Inhaltsverzeichnis 1. Code-Analyse 2. Quellcode Q...

JS implementiert Anforderungsdispatcher

Inhaltsverzeichnis Abstraktion und Wiederverwendu...

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

Eine beträchtliche Anzahl von Websites verwendet d...

MySQL-Datenbanktabelle und Datenbankpartitionierungsstrategie

Lassen Sie uns zunächst darüber sprechen, warum w...

Lösung für vergessenes Linux MySQL-Root-Passwort

Wenn Sie sich bei der Verwendung der MySQL-Datenb...

So installieren Sie Phabricator mit Docker

Ich verwende hier das Ubuntu 16.04-System. Instal...

Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player

In einem aktuellen Projekt musste ich die Funktio...

Verwandte Vorgänge zum Hinzufügen und Löschen von Indizes in MySQL

Inhaltsverzeichnis 1. Die Rolle des Index 2. Erst...

Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen

Bei den vorherigen Artikeln handelte es sich um m...