So erstellen Sie eine Vue3-Desktopanwendung

In diesem Artikel sehen wir uns an, wie man mit Vite ein Vue 3-Desktopprojekt entwickelt.

Im Projekt wird Electron verwendet, eines der beliebtesten Frameworks zum Erstellen plattformübergreifender Desktopanwendungen mit Javascript. Daher verwenden viele beliebte Anwendungen wie VSCode, Slack, Twitch usw. Electron.

Schauen wir uns zunächst an, was zu tun ist:

Obwohl dies nur eine grundlegende Vite-Vorlage ist, wird sie in einem dedizierten Programm statt in einem Browser ausgeführt. Dies ist ein notwendiger Schritt zum Erstellen Ihrer eigenen Desktopanwendung.

Nachfolgend wird der Entwicklungsprozess beschrieben.

Erstellen Sie ein grundlegendes Vite-Programm

Erstellen Sie zunächst eine Vite-Anwendung. Auf die Funktionsweise von Vite werde ich hier nicht näher eingehen.

Führen Sie den folgenden Befehl im Terminal aus:

npm init @vitejs/app
cd [Projektname]
npm installieren

Fertig, probieren Sie es zuerst in Ihrem Browser aus.

Führen Sie einfach den Befehl npm run dev in Ihrem Terminal aus. Öffnen Sie dann die lokale Adresse im Browser. Sie sehen Folgendes:

Kein Problem, jetzt ist es an der Zeit, Electron zu seinen Einstellungen hinzuzufügen.

Electron zum Vite-Projekt hinzufügen

Hier folgen wir dem offiziellen Schnellstart von Electron und nehmen einige Anpassungen in unserer Vite-Anwendung vor.

Installieren Sie zuerst Electron. Geben Sie den folgenden Befehl im Terminal ein:

Installieren Sie Electron nnpm install --save-dev electron

Werfen Sie als Nächstes einen Blick auf das Electron-Handbuch.

Im Handbuch steht, dass für eine einfache Electron-Konfiguration vier Dateien erforderlich sind:

• package.json – das existiert bereits
• Haupt-JS
• preloader.js
• Hauptseite

Es sieht so aus, als ob das Projekt die Dateien main.js und index.html enthält, es handelt sich dabei jedoch um Vite-Dateien und nicht um Electron-Dateien. Vite-Dateien können nur zum Ausführen von Vite-Programmen verwendet werden, daher ist auch eine separate Electron-Datei erforderlich.

main.js wird zum Erstellen der Desktop-Anwendung verwendet und in index.html geladen. Es sollte auch den von uns erstellten Vite-Anwendungscode enthalten.

Erstellen eines Vite-Programms

Sie müssen also zuerst das Vite-Programm erstellen. Da es in Electron integriert werden muss, sind einige zusätzliche Konfigurationen erforderlich. Wir möchten sicherstellen, dass beim Erstellen des Projekts alle Verweise auf die endgültigen JavaScript- und CSS-Dateien auf die richtigen Pfade verweisen.

Das zu erstellende Vite-Projekt erstellt ein Dist-Verzeichnis mit der folgenden Struktur.

Da sich unser Electron-Code jedoch im Stammverzeichnis des Projekts befindet, sollten wir die Basis des gesamten Projekts auf den Ordner „dist“ festlegen. Dies kann erreicht werden, indem die Basiseigenschaft in der Datei vite.config.js mithilfe der Pfadbibliothek festgelegt wird.

//vite.config.js
importiere { defineConfig } von 'vite'
vue aus '@vitejs/plugin-vue' importieren
const Pfad = require('Pfad')

// https://vitejs.dev/config/
exportiere Standard-DefineConfig({
  Basis: Pfad.Auflösen(__dirname, './dist/'),
  Plugins: [vue()]
})

Jetzt können Sie „npm run build“ in Ihrem Terminal ausführen, um das Dist-Verzeichnis zu erstellen.

Einrichten von Electrons main.js

Der nächste Schritt besteht darin, die Datei main.js im Stammverzeichnis des Projekts zu erstellen.

Nach der Erstellung müssen wir nur den Code aus der Electron-Kurzanleitung kopieren und einfügen.

Dort, wo wir index.html laden, ändern wir es in dist/index.html, sodass wir die Datei im dist-Verzeichnis verwenden.

Der endgültige Code in main.js sieht also wie folgt aus:

//main.js
const { app, BrowserWindow } = require('electron')
const Pfad = require('Pfad')

Funktion Fenster erstellen () {
  const win = neues Browserfenster({
    Breite: 800,
    Höhe: 600,
    Webeinstellungen: {
      vorladen: Pfad.beitreten(__dirname, 'preload.js')
    }
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  Fenster erstellen()

  app.on('aktivieren', () => {
    wenn (BrowserWindow.getAllWindows().length === 0) {
      Fenster erstellen()
    }
  })
})

app.on('Fenster-alle-geschlossen', () => {
  wenn (Prozess.Plattform !== 'darwin') {
    app.beenden()
  }
})

Erstellen und schreiben Sie preload.js.

Als Nächstes erstellen wir eine Datei preload.js im Stammverzeichnis des Projekts und verwenden den Schnellstartcode erneut, dieses Mal ohne etwas zu ändern.

//vorladen.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (Selektor, Text) => {
      const element = document.getElementById(Selektor)
      wenn (Element) Element.innerText = Text
    }
  
    für (const Typ von ['Chrom', 'Knoten', 'Elektron']) {
      replaceText(`${type}-version`, Prozess.Versionen[Typ])
    }
})

Ändern Sie package.json

Wir sind fast am Ziel, wir müssen nur noch ein paar letzte Änderungen an unserer Datei package.json vornehmen, damit wir den Electron-Befehl ausführen können.

Zuerst müssen wir die Haupteigenschaft festlegen. Standardmäßig sucht Electron im Stammverzeichnis nach der Datei index.js und führt sie aus. Da unsere Datei jedoch main.js heißt, müssen wir sie in package.json definieren.

//paket.json
{
  "Name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js", // Diese Zeile …
}

Legen Sie dann die Art und Weise fest, wie Electron ausgeführt werden soll, und erstellen Sie im Abschnitt „Skripte“ ein neues Skript mit dem Namen „electron:start“ und dem Inhalt „electron …“.

//paket.json
{
  "Name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js",
  "Skripte": {
    "Entwickler": "vite",
    "Build": "vite-Build",
    "serve": "vite Vorschau",
    "electron:start": "electron." // hier},
  ...
}

Das ist der gesamte Code.

Führen Sie abschließend den Befehl npm run electron:start im Terminal aus und Sie sehen:

Das Desktop-Programm ist endlich fertig. Es ist ganz einfach~

Abschließende Gedanken

Als ich kürzlich Vue verbesserte, fand ich ein High-End-Tutorial zu Vue3+TS. Teilen Sie es kostenlos mit den Diggern, klicken Sie hier, um das Tutorial zu sehen

Dies ist das Ende dieses Artikels zum Erstellen einer Vue3-Desktopanwendung. Weitere relevante Inhalte zu Vue3-Desktopanwendungen 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!