Vite+Electron zum schnellen Erstellen von VUE3-Desktopanwendungen

1. Einleitung

Lassen Sie mich zunächst Vite und Electron vorstellen.

• Vite ist ein neues Front-End-Erstellungstool, das die Front-End-Entwicklungserfahrung erheblich verbessern kann. Gestartet von Youda, der die Nachricht „Ich kann nie wieder zu Webpack zurückkehren …“ postete.
• Electron ist ein Framework zum Erstellen von Desktop-Anwendungen mit JavaScript, HTML und CSS. Electron bettet Chromium und Node.js in die Binärdatei ein, sodass Sie eine einzelne JavaScript-Codebasis verwalten und plattformübergreifende Apps erstellen können, die unter Windows, macOS und Linux laufen – keine native Entwicklungserfahrung erforderlich.

Als ich anfing, über die Verwendung von Vue zur Entwicklung einer Desktop-Anwendung nachzudenken, suchte ich zunächst und fand heraus, dass es derzeit zwei vorgefertigte Lösungen gibt:

• electron-vue: Dieses Projekt verfügt über eine gute Integration und vollständige Kapselung. Viele chinesische Artikel befassen sich mit dieser Lösung, Sie können sie also direkt verwenden. Das Problem besteht jedoch darin, dass die Version des integrierten Electrons zu niedrig ist. Die Version, die ich beim Schreiben des Artikels gesehen habe, war 2.0.4, während die neueste Electron-Version 15.1.2 ist.
• Vue CLI-Plugin Electron Builder: Diese Lösung ist in vue-cli integriert. Sie können direkt nach der Verwendung von vue add electron-builder loslegen, wodurch die grundlegenden Konfigurationsschritte entfallen. Es kann jedoch nur unter vue-cli und nicht mit vite verwendet werden.

Wenn Sie Vite und Electron verwenden möchten, müssen Sie sie daher selbst konfigurieren.

2. Erstellen Sie ein Vite-Projekt

1. Installieren Sie Vite

Garn erstellen Vite

2. Erstellen Sie ein Projekt

Der Erstellungsbefehl lautet wie folgt:

yarn create vite <Name Ihrer Vue-App> --template vue

Erstellen Sie hier ein Projekt mit dem Namen „kuari“.

Garn erstellen vite kuari --template vue

3. Eintreten und ausführen

Geben Sie das Projekt ein und installieren Sie die Abhängigkeiten vor dem Ausführen.

CD Kuari
Garn installieren
Garn-Entwickler

Sobald der Run-Befehl eingegeben wird, läuft er fast schon und ist der Bezeichnung „vite“ würdig. Folgen Sie jetzt der Ausgabe, öffnen Sie die Adressvorschau und Sie können die Initialisierungsseite sehen.

An diesem Punkt wurde ein grundlegendes Vite-Projekt erstellt.

3. Electron konfigurieren

1. Offizielle Dokumentation

Im Schnellstartdokument auf der offiziellen Electron-Website gibt es eine offizielle Fallstudie zum Erstellen einer Electron-Anwendung mit HTML, JavaScript und CSS, und die Vite+Electron-Lösung greift ebenfalls darauf zurück.

2. Installation

Installieren Sie zuerst die Electron-to-Vite-Anwendung. Die aktuelle Version von Electron ist ^15.1.2,.

Garn hinzufügen --dev Elektron

3. Konfigurationsdateien

1) vite.config.js

importiere { defineConfig } von 'vite'
vue aus '@vitejs/plugin-vue' importieren
Pfad von „Pfad“ importieren // Neu // https://vitejs.dev/config/
exportiere Standard-DefineConfig({
  Basis: Pfad.resolve(__dirname, './dist/'), // Plugins hinzufügen: [vue()]
})

2) main.js
Erstellen Sie eine neue Datei main.js. Beachten Sie, dass der Ladepfad von index.html im Inhalt von der auf der offiziellen Electron-Website angegebenen Konfiguration abweicht.

// Haupt.js

// Modul, das den Anwendungslebenszyklus steuert und native Browserfenster erstellt const { app, BrowserWindow } = require('electron')
const Pfad = require('Pfad')

Funktion Fenster erstellen () {
  // Ein Browserfenster erstellen const mainWindow = new BrowserWindow({
    Breite: 800,
    Höhe: 600,
    Webeinstellungen: {
      vorladen: Pfad.beitreten(__dirname, 'preload.js')
    }
  })

  // index.html laden
  mainWindow.loadFile('dist/index.html') // Dies unterscheidet sich vom Pfad auf der offiziellen Electron-Website. Bitte beachten Sie. // Öffnen Sie die Entwicklungstools // mainWindow.webContents.openDevTools()
}

// Dieses Programm wird aufgerufen, wenn Electron die Initialisierung abgeschlossen hat // und das Browserfenster erstellt. // Einige APIs können erst verwendet werden, nachdem das Ready-Ereignis ausgelöst wurde.
app.whenReady().then(() => {
  Fenster erstellen()

  app.on('aktivieren', Funktion () {
    // Normalerweise erstellt das Programm unter macOS ein neues Fenster, wenn Sie im Dock auf ein Anwendungssymbol klicken und keine anderen // Fenster geöffnet sind.
    wenn (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Außer unter macOS: Beenden Sie das Programm, wenn alle Fenster geschlossen sind. Daher ist es normalerweise erforderlich, dass Programme und ihre Symbole in der // Taskleiste aktiv bleiben, bis der Benutzer sie mit Cmd + Q beendet.
app.on('Fenster-alle-geschlossen', Funktion () {
  wenn (Prozess.Plattform !== 'darwin') app.quit()
})

// In diese Datei können Sie den gesamten restlichen Code Ihrer Anwendung einfügen,
// Es kann auch in mehrere Dateien aufgeteilt und dann mit require importiert werden.

3) preload.js

Erstellen Sie eine neue Datei preload.js.

// vorladen.js

// Alle Node.js-APIs sind während des Vorladevorgangs verfügbar.
// Es hat dieselbe Sandbox wie Chrome-Erweiterungen.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (Selektor, Text) => {
    const element = document.getElementById(Selektor)
    wenn (Element) Element.innerText = Text
  }

  für (konstante Abhängigkeit von ['Chrome', 'Knoten', 'Elektron']) {
    replaceText(`${dependency}-version`, Prozess.Versionen[Abhängigkeit])
  }
})

4) Paket.json

Um sicherzustellen, dass Sie zugehörige Electron-Befehle ausführen können, müssen Sie die Datei package.json ändern.

Zuerst müssen Sie die Haupteigenschaft festlegen. Electron sucht standardmäßig zu Beginn im Stammverzeichnis des Projekts nach der Datei index.js. Hier verwenden wir main.js, also müssen wir sie definieren.

// paket.json

{
  "Name": "kuari",
  "version": "0.0.0",
  "main": "main.js", // "scripts" hinzufügen: {
    "Entwickler": "vite",
    "Build": "vite-Build",
    "serve": "vite Vorschau"
  },
  "Abhängigkeiten": {
    "vue": "^3.2.16"
  },
  "devAbhängigkeiten": {
    "@vitejs/plugin-vue": "^1.9.3",
    "Elektron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

Schließlich müssen wir den Run-Befehl von Electron hinzufügen.

// paket.json

{
  "Name": "kuari",
  "version": "0.0.0",
  "main": "main.js",
  "Skripte": {
    "Entwickler": "vite",
    "Build": "vite-Build",
    "serve": "vite Vorschau",
    "electron:serve": "electron." // Neu},
  "Abhängigkeiten": {
    "vue": "^3.2.16"
  },
  "devAbhängigkeiten": {
    "@vitejs/plugin-vue": "^1.9.3",
    "Elektron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

4. Laufen

Geben Sie folgenden Befehl direkt im Terminal ein:

Garn Elektron: dienen

Dann können wir unsere Desktopanwendung erscheinen sehen!

5. Abschließende Gedanken

Ich habe für meine bisherigen Projekte immer das Vue CLI Plugin Electron Builder verwendet. Dieses Mal habe ich ein Projekt, das ich zuerst mit Electron entwickeln werde, es herausbringen und sehen werde, wie es läuft. Später werde ich Swift verwenden, um je nach Situation eine Mac-Desktopanwendung neu zu entwickeln. Ich wollte einfach etwas Neues ausprobieren, ich hatte nie die Gelegenheit, Vite auszuprobieren.

Electron ist wirklich praktisch, aber die gepackte Anwendung ist zu groß, was wirklich ein Fehler ist. Die Zielgruppe sind diesmal in erster Linie Windows-Benutzer, also nutzen wir Electron!

Dies ist das Ende dieses Artikels zum schnellen Erstellen einer VUE3-Desktopanwendung mit Vite+Electron. Weitere Informationen zum schnellen Erstellen von VUE3 mit Vite+Electron finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!