Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron

Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron

Um einige persönliche Essays aufzuzeichnen, habe ich vor Kurzem mit Laravel und Vue 3.0 ein Blogsystem erstellt, das eine auf markdown-it basierende markdown Editor- Vue- Komponente v-md-editor verwendet. Ich finde es sehr praktisch, damit markdown zu schreiben. Später kam mir die Idee, mit Electron eine markdown Desktopanwendung auf Basis dieser Komponente zu implementieren, die auch für meinen täglichen Gebrauch eine gute Wahl ist.

Off topic: VS Code ist eine mit Electron entwickelte Desktop-Anwendung. Außer für die mobile Entwicklung verwende ich jetzt VS Code für alle anderen Entwicklungen. Es ist wirklich praktisch, verschiedene Plug-Ins zu entwickeln.

Als Nächstes werde ich Sie Schritt für Schritt durch die Implementierung dieser Funktion führen.

Vue CLI erstellt ein Vue-Projekt

Führen Sie vue create electron-vue3-mark-down im ausgewählten Verzeichnis aus.

Wählen Sie eine benutzerdefinierte Vorlage (Sie können die Standardvorlage von Vue 3 wählen)

Wählen Sie Vue3 und TypeScript und wählen Sie weitere Optionen basierend auf Ihrem eigenen Projekt

vue3 + TypeScript

Führen Sie npm run serve aus, um den Effekt zu sehen

Wirkung

Vue-Projekt in Markdown -Editor umgewandelt

Führen Sie npm i @kangc/v-md-editor@next -S aus, um v-md-editor zu installieren

TypeScript-Typdefinitionsdatei hinzufügen

Da die Bibliothek v-md-editor keine TypeScript -Typdefinitionsdatei hat, habe ich sie direkt nach der Datei shims-vue.d.ts hinzugefügt. Natürlich können Sie auch eine neue Datei erstellen, um die Deklaration hinzuzufügen (sofern tsconfig.json diese Datei finden kann).

Deklariere das Modul "*.vue" {
  Importtyp {DefineComponent} von „vue“;
  const-Komponente: DefineComponent<{}, {}, any>;
  Standardkomponente exportieren;
}

<!-- Hinzugefügter Inhalt -->
Deklarieren Sie das Modul „@kangc/v-md-editor/lib/theme/vuepress.js“;
Deklarieren Sie das Modul „@kangc/v-md-editor/lib/plugins/copy-code/index“;
Deklarieren Sie das Modul „@kangc/v-md-editor/lib/plugins/line-number/index“;
Deklariere das Modul „@kangc/v-md-editor“;
Deklarieren Sie das Modul „prismjs“.

Transformieren Sie App.vue

<Vorlage>
  <div>
    <v-md-editor v-model="Inhalt" Höhe="100vh"></v-md-editor>
  </div>
</Vorlage>

<script lang="ts">
// Editor importiere VMdEditor von "@kangc/v-md-editor";
importiere "@kangc/v-md-editor/lib/style/base-editor.css";
importiere vuepress von "@kangc/v-md-editor/lib/theme/vuepress.js";
importiere "@kangc/v-md-editor/lib/theme/style/vuepress.css";
// Markieren Sie „import Prism from „prismjs““;
importiere "prismjs/components/prism-json";
importiere "prismjs/components/prism-dart";
importiere "prismjs/components/prism-c";
importiere "prismjs/components/prism-swift";
importiere "prismjs/components/prism-kotlin";
importiere "prismjs/components/prism-java";

// Code schnell kopieren importiere createCopyCodePlugin von "@kangc/v-md-editor/lib/plugins/copy-code/index";
importiere "@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css";
// Zeilennummer importiere createLineNumbertPlugin von "@kangc/v-md-editor/lib/plugins/line-number/index";
VMdEditor.use(vuepress, {
  Prisma,
})
  .use(createCopyCodePlugin())
  .use(createLineNumbertPlugin());

importiere { defineComponent, ref } von "vue";
exportiere StandarddefiniereKomponente({
  Name: "App",
  Komponenten: { VMdEditor },
  aufstellen() {
    const Inhalt = ref("");

    gebe { Inhalt } zurück;
  },
});
</Skript>

<Stil>
/* Einige Schaltflächen entfernen */
.v-md-icon-speichern,
.v-md-icon-vollbild {
  Anzeige: keine;
}
</Stil>

Diese Datei ist auch sehr einfach. Die ganze Seite ist ein Editor <v-md-editor v-model="content" height="100vh"></v-md-editor> . Dieser Markdown-Editor verfügt über Plug-Ins wie Hervorhebung, Anzeige der Codezeilennummer und Schaltfläche zum Kopieren von Code. Natürlich ist es bequemer, andere Plug-Ins hinzuzufügen, um die Funktionen dieses Markdown-Editors zu erweitern.

Die Wirkung ist wie folgt

Editor-Effekte

Vue CLI-Plugin Electron Builder

Ich habe versucht, mit Vite 2.0 ein Electron- Projekt zu erstellen, habe aber kein ähnliches Tool gefunden, das Vite und Electron gut kombiniert, sodass ich der Versuchung von Vite 2.0 widerstanden habe. Wenn jemand Empfehlungen hat, teilen Sie sie uns bitte mit.

Verwenden Sie zur Installation vue add electron-builder . Ich habe die neueste Version von Electron , 13.0.0 , gewählt.

Normalerweise wähle ich die höchste Version. Tatsächlich hat diese Version eine Falle. Ich werde später darüber nachdenken, diese Falle einzuführen, haha.

Wirkung

Wir können sehen, dass viele neue abhängige Bibliotheken hinzugefügt wurden und eine Datei background.ts hinzugefügt wurde. Um es kurz vorzustellen: Diese Datei wird im Hauptthread ausgeführt, und andere Seiten befinden sich im Rendering-Thread. Der Rendering-Thread unterliegt vielen Einschränkungen und einige Funktionen können nur im Hauptthread ausgeführt werden, worauf hier nicht näher eingegangen wird.

Führen Sie npm run electron:serve um den Effekt zu sehen

Wirkung

An diesem Punkt können Sie die Wirkung der Desktopanwendung sehen, und während Sie den Vue-Code ändern, kann die Desktopanwendung die geänderte Wirkung auch in Echtzeit sehen.

Optimierung

Vollbildanzeige starten

Einführungsbildschirm

importiere { screen } von "electron";

Beim Erstellen eines Fensters auf Bildschirmgröße einstellen

<!-- Hintergrund.ts -->
asynchrone Funktion createWindow() {
  const { Breite, Höhe } = screen.getPrimaryDisplay().workAreaSize;
  const win = neues Browserfenster({
    Breite,
    Höhe,
    // Ausgelassen...
  });
    // Ausgelassen...
}

Auf diese Weise wird die Anwendung beim Start im Vollbildmodus angezeigt.

Ändern der Menüleiste

Definieren Sie die Menüleiste

<!-- Hintergrund.ts -->

const-Vorlage: Array<MenuItemConstructorOptions> = [
  {
    Bezeichnung: "MarkDown",
    Untermenü: [
      {
        Bezeichnung: "Über",
        Beschleuniger: „CmdOderStrg+W“,
        Rolle: "Über",
      },
      {
        Bezeichnung: "Programm beenden",
        Beschleuniger: „CmdOderStrg+Q“,
        Rolle: "beenden",
      },
    ],
  },
  {
    Bezeichnung: "Datei",
    Untermenü: [
      {
        Bezeichnung: "Datei öffnen",
        Beschleuniger: "CmdOderStrg+O",
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          _event: Tastaturereignis
        ) => {
            // TODO: Datei öffnen},
      },
      {
        Bezeichnung: „Speicher“,
        Beschleuniger: „CmdOderStrg+S“,
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          _event: Tastaturereignis
        ) => {
          //TODO: Inhalt speichern},
      },
    ],
  },
  {
    Beschriftung: "Bearbeiten",
    Untermenü: [
      {
        Bezeichnung: "Widerrufen",
        Beschleuniger: „CmdOderStrg+Z“,
        Rolle: „Rückgängig machen“,
      },
      {
        Bezeichnung: "Wiederholen",
        Beschleuniger: „Umschalt+Befehlstaste oder Strg+Z“,
        Rolle: "Wiederholen",
      },
      {
        Typ: "Trennzeichen",
      },
      {
        Beschriftung: "Schnitt",
        Beschleuniger: „CmdOderStrg+X“,
        Rolle: "Schnitt",
      },
      {
        Bezeichnung: "Kopieren",
        Beschleuniger: "CmdOderStrg+C",
        Rolle: "Kopie",
      },
      {
        Bezeichnung: "Einfügen",
        Beschleuniger: „CmdOderStrg+V“,
        Rolle: "Einfügen",
      },
    ],
  },
  {
    Bezeichnung: "Fenster",
    Rolle: "Fenster",
    Untermenü: [
      {
        Beschriftung: "Minimieren",
        Beschleuniger: „CmdOderStrg+M“,
        Rolle: "minimieren",
      },
      {
        Bezeichnung: "maximieren",
        Beschleuniger: „CmdOderStrg+M“,
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          _event: Tastaturereignis
        ) => {
          if (fokussiertesFenster) {
            fokussiertesFenster.maximieren();
          }
        },
      },
      {
        Typ: "Trennzeichen",
      },
      {
        Beschriftung: "Vollbild umschalten",
        Beschleuniger: (Funktion () {
          wenn (Prozess.Plattform === "darwin") {
            gibt „Strg+Befehl+F“ zurück;
          } anders {
            gib "F11" zurück;
          }
        })(),
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          // eslint-disable-next-line @typescript-eslint/keine-unused-vars
          _event: Tastaturereignis
        ) => {
          if (fokussiertesFenster) {
            fokussiertesWindow.setFullScreen(!focusedWindow.isFullScreen());
          }
        },
      },
    ],
  },
  {
    Beschriftung: "Hilfe",
    Rolle: "Hilfe",
    Untermenü: [
      {
        Beschriftung: „Mehr erfahren“,
        Klick: Funktion () {
          shell.openExternal("http://electron.atom.io");
        },
      },
    ],
  },
];

Einzelheiten zur Definition finden Sie unter Electron Menu.

Das Öffnen und Speichern von Dateien ist noch nicht implementiert, soll aber später erfolgen.

Einrichten der Menüleiste

importiere { Menü } von "electron";
app.on("bereit", async () => {
  // Ausgelassen...
  // MenüMenu.setApplicationMenu erstellen (Menu.buildFromTemplate (Vorlage));
});

Stellen Sie das Menü in der ready ein.

Wirkung

Menüeffekte

Der Editor öffnet den Inhalt der Markdonw-Datei

Der Hauptthread wählt die Datei aus und übergibt den Dateipfad an den Rendering-Thread.

<!-- Hintergrund.ts -->
Dialog
  .showOpenDialog({
    Eigenschaften: ["openFile"],
    Filter: [{ Name: "Benutzerdefinierter Dateityp", Erweiterungen: ["md"] }],
  })
  .then((res) => {
    wenn (res && res["Dateipfade"].Länge > 0) {
      const filePath = res["Dateipfade"][0];
      // Übergebe die Datei an den Rendering-Thread if (focusedWindow) {
        focusedWindow.webContents.send("Dateipfad öffnen", Dateipfad);
      }
    }
  })
  .catch((err) => {
    console.log(fehler);
  });

showOpenDialog ist die Methode zum Öffnen einer Datei. Hier geben wir an, dass nur die MD-Datei geöffnet werden soll.

Nachdem Sie den Dateipfad erhalten haben, übergeben Sie ihn über focusedWindow.webContents.send("open-file-path", filePath); an den Rendering-Thread.

Der Rendering-Thread erhält den Dateipfad, liest den Dateiinhalt und weist ihn dem Markdown-Editor zu

<!-- App.vue -->
importiere { ipcRenderer } von "electron";
importiere { readFileSync } von "fs";

exportiere StandarddefiniereKomponente({
  // Ausgelassen...
  aufstellen() {
    const Inhalt = ref("");
    
    beimMounted(() => {
      // 1.
      ipcRenderer.on("open-file-path", (e, Dateipfad: Zeichenfolge) => {
        if (Dateipfad && Dateipfad.Länge > 0) {
          // 2.
          Inhalt.Wert = readFileSync(Dateipfad).toString();
        }
      });
    });

    gebe { Inhalt } zurück;
  },
});

Vue fügt Knotenunterstützung hinzu

<!-- vue.config.js -->
modul.exporte = {
  Plugin-Optionen: {
    ElektronenBuilder: {
      nodeIntegration: wahr,
    },
  },
};

Wirkung

Rendern

Speichern Sie den Inhalt von markdonw in der Datei

Der Hauptthread initiiert eine Anfrage an den Rendering-Thread, um den Editor-Inhalt abzurufen.

<!-- Hintergrund.js -->
if (fokussiertesFenster) {
    fokussiertWindow.webContents.send("get-content", "");
}

Der Rendering-Thread gibt den Editor-Inhalt an den Haupt-Thread zurück.

<!-- App.vue -->
beimMounted(() => {
    ipcRenderer.on("get-content", () => {
        ipcRenderer.send("Inhalt speichern", Inhalt.Wert);
    });
});

Der Hauptthread empfängt den Inhalt und speichert ihn in der Datei

<!-- Hintergrund.ts -->
// Datei speichern ipcMain.on("save-content", (event: unknown, content: string) => {
  if (openedFile.length > 0) {
    // Direkt in die Datei speichern try {
      writeFileSync(geöffneteDatei, Inhalt);
      console.log("Erfolgreich gespeichert");
    } Fehler abfangen {
      console.log("Speichern fehlgeschlagen");
    }
  } anders {
    const Optionen = {
      Titel: "Datei speichern",
      Standardpfad: "new.md",
      Filter: [{ Name: "Benutzerdefinierter Dateityp", Erweiterungen: ["md"] }],
    };
    const fokussiertesWindow = BrowserWindow.getFocusedWindow();
    if (fokussiertesFenster) {
      Dialog
        .showSaveDialog(fokussiertesFenster, Optionen)
        .then((Ergebnis: Electron.SaveDialogReturnValue) => {
          if (Ergebnis.Dateipfad) {
            versuchen {
              writeFileSync(Ergebnis.Dateipfad, Inhalt);
              console.log("Erfolgreich gespeichert");
              geöffneteDatei = Ergebnis.Dateipfad;
            } Fehler abfangen {
              console.log("Speichern fehlgeschlagen");
            }
          }
        })
        .catch((Fehler) => {
          konsole.log(Fehler);
        });
    }
  }
});

Wirkung

Rendern

Pack

Legen Sie den Namen und das Bild der Anwendung fest

<!-- vue.config.js -->
modul.exporte = {
  Plugin-Optionen: {
    ElektronenBuilder: {
      nodeIntegration: wahr,
      // Einstellungen hinzugefügt builderOptions: {
        Anwendungs-ID: "com.johnny.markdown", 
        productName: "JJMarkDown", // Anwendungsname copyright: "Copyright © 2021", // Copyright-Erklärung mac: {
          Symbol: "./public/icon.icns", // Symbol
        },
      },
    },
  },
};

Bereiten Sie ein 1024*1024-Bild für die Icon.icns-Generierung vor und erstellen Sie im selben Verzeichnis einen Ordner mit dem Namen icons.iconset .

Erstellen Sie Bilddateien verschiedener Größen

Schlucke -z 16 16 icon.png -o icons.iconset/icon_16x16.png
sips -z 32 32 icon.png -o icons.iconset/[email protected]
sips -z 32 32 icon.png -o icons.iconset/icon_32x32.png
sips -z 64 64 icon.png -o icons.iconset/[email protected]
Schlucke -z 128 128 icon.png -o icons.iconset/icon_128x128.png
sips -z 256 256 icon.png -o icons.iconset/[email protected]
sips -z 256 256 icon.png -o icons.iconset/icon_256x256.png
sips -z 512 512 icon.png -o icons.iconset/[email protected]
sips -z 512 512 icon.png -o icons.iconset/icon_512x512.png
sips -z 1024 1024 icon.png -o icons.iconset/[email protected]

Holen Sie sich die Symboldatei mit dem Namen icon.icns

iconutil -c icns icons.iconset -o icon.icns

Pack

npm führt electron:build aus

Ergebnis

Schaden

Die erhaltene dmg-Datei kann direkt installiert und verwendet werden.

Code

<!-- Hintergrund.ts -->
"streng verwenden";

importieren {
  App,
  Protokoll,
  Browserfenster,
  Bildschirm,
  Speisekarte,
  Menüpunkt,
  Hülse,
  Dialog,
  ipcHaupt,
} von "Elektron";
importiere { KeyboardEvent, MenuItemConstructorOptions } von "electron/main";
importiere { createProtocol } aus „vue-cli-plugin-electron-builder/lib“;
importiere installExtension, { VUEJS3_DEVTOOLS } von „electron-devtools-installer“;
const isDevelopment = process.env.NODE_ENV !== "Produktion";
importiere { writeFileSync } von "fs";

let geöffneteDatei = "";
// Datei speichern ipcMain.on("save-content", (event: unknown, content: string) => {
  if (openedFile.length > 0) {
    // Direkt in die Datei speichern try {
      writeFileSync(geöffneteDatei, Inhalt);
      console.log("Erfolgreich gespeichert");
    } Fehler abfangen {
      console.log("Speichern fehlgeschlagen");
    }
  } anders {
    const Optionen = {
      Titel: "Datei speichern",
      Standardpfad: "new.md",
      Filter: [{ Name: "Benutzerdefinierter Dateityp", Erweiterungen: ["md"] }],
    };
    const fokussiertesWindow = BrowserWindow.getFocusedWindow();
    if (fokussiertesFenster) {
      Dialog
        .showSaveDialog(fokussiertesFenster, Optionen)
        .then((Ergebnis: Electron.SaveDialogReturnValue) => {
          if (Ergebnis.Dateipfad) {
            versuchen {
              writeFileSync(Ergebnis.Dateipfad, Inhalt);
              console.log("Erfolgreich gespeichert");
              geöffneteDatei = Ergebnis.Dateipfad;
            } Fehler abfangen {
              console.log("Speichern fehlgeschlagen");
            }
          }
        })
        .catch((Fehler) => {
          konsole.log(Fehler);
        });
    }
  }
});

const-Vorlage: Array<MenuItemConstructorOptions> = [
  {
    Bezeichnung: "MarkDown",
    Untermenü: [
      {
        Bezeichnung: "Über",
        Beschleuniger: „CmdOderStrg+W“,
        Rolle: "Über",
      },
      {
        Bezeichnung: "Programm beenden",
        Beschleuniger: „CmdOderStrg+Q“,
        Rolle: "beenden",
      },
    ],
  },
  {
    Bezeichnung: "Datei",
    Untermenü: [
      {
        Bezeichnung: "Datei öffnen",
        Beschleuniger: "CmdOderStrg+O",
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          // eslint-disable-next-line @typescript-eslint/keine-unused-vars
          _event: Tastaturereignis
        ) => {
          Dialog
            .showOpenDialog({
              Eigenschaften: ["openFile"],
              Filter: [{ Name: "Benutzerdefinierter Dateityp", Erweiterungen: ["md"] }],
            })
            .then((res) => {
              wenn (res && res["Dateipfade"].Länge > 0) {
                const filePath = res["Dateipfade"][0];
                // Übergebe die Datei an den Rendering-Thread if (focusedWindow) {
                  focusedWindow.webContents.send("Dateipfad öffnen", Dateipfad);
                  geöffneteDatei = Dateipfad;
                }
              }
            })
            .catch((err) => {
              console.log(fehler);
            });
        },
      },
      {
        Bezeichnung: „Speicher“,
        Beschleuniger: „CmdOderStrg+S“,
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          // eslint-disable-next-line @typescript-eslint/keine-unused-vars
          _event: Tastaturereignis
        ) => {
          if (fokussiertesFenster) {
            fokussiertWindow.webContents.send("get-content", "");
          }
        },
      },
    ],
  },
  {
    Beschriftung: "Bearbeiten",
    Untermenü: [
      {
        Bezeichnung: "Widerrufen",
        Beschleuniger: „CmdOderStrg+Z“,
        Rolle: „Rückgängig machen“,
      },
      {
        Bezeichnung: "Wiederholen",
        Beschleuniger: „Umschalt+Befehlstaste oder Strg+Z“,
        Rolle: "Wiederholen",
      },
      {
        Typ: "Trennzeichen",
      },
      {
        Beschriftung: "Schnitt",
        Beschleuniger: „CmdOderStrg+X“,
        Rolle: "Schnitt",
      },
      {
        Bezeichnung: "Kopieren",
        Beschleuniger: "CmdOderStrg+C",
        Rolle: "Kopie",
      },
      {
        Bezeichnung: "Einfügen",
        Beschleuniger: „CmdOderStrg+V“,
        Rolle: "Einfügen",
      },
    ],
  },
  {
    Bezeichnung: "Fenster",
    Rolle: "Fenster",
    Untermenü: [
      {
        Beschriftung: "Minimieren",
        Beschleuniger: „CmdOderStrg+M“,
        Rolle: "minimieren",
      },
      {
        Bezeichnung: "maximieren",
        Beschleuniger: „CmdOderStrg+M“,
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          // eslint-disable-next-line @typescript-eslint/keine-unused-vars
          _event: Tastaturereignis
        ) => {
          if (fokussiertesFenster) {
            fokussiertesFenster.maximieren();
          }
        },
      },
      {
        Typ: "Trennzeichen",
      },
      {
        Beschriftung: "Vollbild umschalten",
        Beschleuniger: (Funktion () {
          wenn (Prozess.Plattform === "darwin") {
            gibt „Strg+Befehl+F“ zurück;
          } anders {
            gib "F11" zurück;
          }
        })(),
        klicken: (
          Element: Menüelement,
          fokussiertesFenster: Browserfenster | undefiniert,
          // eslint-disable-next-line @typescript-eslint/keine-unused-vars
          _event: Tastaturereignis
        ) => {
          if (fokussiertesFenster) {
            fokussiertesWindow.setFullScreen(!focusedWindow.isFullScreen());
          }
        },
      },
    ],
  },
  {
    Beschriftung: "Hilfe",
    Rolle: "Hilfe",
    Untermenü: [
      {
        Beschriftung: „Mehr erfahren“,
        Klick: Funktion () {
          shell.openExternal("http://electron.atom.io");
        },
      },
    ],
  },
];

Protokoll.registerSchemesAsPrivileged([
  { Schema: "App", Berechtigungen: { sicher: wahr, Standard: wahr } },
]);

asynchrone Funktion createWindow() {
  const { Breite, Höhe } = screen.getPrimaryDisplay().workAreaSize;
  const win = neues Browserfenster({
    Breite,
    Höhe,
    Webeinstellungen: {
      nodeIntegration: wahr,
      KontextIsolation: falsch,
    },
  });

  wenn (Prozess.Umgebung.WEBPACK_DEV_SERVER_URL) {
    //Laden Sie die URL des Dev-Servers, wenn Sie sich im Entwicklungsmodus befinden
    warte auf win.loadURL(process.env.WEBPACK_DEV_SERVER_URL als Zeichenfolge);
    wenn (!process.env.IS_TEST) win.webContents.openDevTools();
  } anders {
    Protokoll erstellen("App");
    // Laden Sie die Datei „index.html“, wenn Sie sich nicht in der Entwicklung befinden
    win.loadURL("app://./index.html");
  }
}

// Beenden, wenn alle Fenster geschlossen sind.
app.on("Fenster-alle-geschlossen", () => {
  // Unter macOS ist es üblich, dass Anwendungen und deren Menüleiste
  // aktiv bleiben, bis der Benutzer explizit mit Cmd + Q beendet
  wenn (Prozess.Plattform !== "darwin") {
    app.quittieren();
  }
});

app.on("aktivieren", () => {
  // Unter macOS ist es üblich, ein Fenster in der App neu zu erstellen, wenn das
  // Auf das Dock-Symbol wird geklickt und es sind keine anderen Fenster geöffnet.
  wenn (BrowserWindow.getAllWindows().length === 0) createWindow();
});

// Diese Methode wird aufgerufen, wenn Electron fertig ist
// Initialisierung und ist bereit zum Erstellen von Browserfenstern.
// Einige APIs können erst verwendet werden, nachdem dieses Ereignis eintritt.
app.on("bereit", async () => {
  wenn (isDevelopment && !process.env.IS_TEST) {
    // Vue Devtools installieren
    versuchen {
      warte auf installExtension(VUEJS3_DEVTOOLS);
    } fangen (e) {
      console.error("Vue Devtools konnte nicht installiert werden:", e.toString());
    }
  }
  Fenster erstellen();
  // MenüMenu.setApplicationMenu erstellen (Menu.buildFromTemplate (Vorlage));
});

// Auf Anforderung des übergeordneten Prozesses im Entwicklungsmodus sauber beenden.
if (istEntwicklung) {
  wenn (Prozess.Plattform === "win32") {
    process.on("Nachricht", (Daten) => {
      wenn (Daten === "ordnungsgemäßer Ausgang") {
        app.quittieren();
      }
    });
  } anders {
    Prozess.auf("SIGTERM", () => {
      app.quittieren();
    });
  }
}

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung zur Implementierung von Desktop-Anwendungen mit Vue3 und Electron. Weitere relevante Inhalte zu Desktop-Anwendungen mit Vue3 Electron finden Sie in den vorherigen Artikeln von 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:
  • Vite+Electron zum schnellen Erstellen von VUE3-Desktopanwendungen
  • Detaillierte Erläuterung des Betriebsvorgangs zum Verpacken des Desktops mit Electron + Vue
  • Beispielcode zum Erstellen von Desktop-Anwendungen mit Vue + Electron

<<:  Eine kurze Diskussion über die Leistungsprobleme des MySQL-Paging-Limits

>>:  Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Artikel empfehlen

Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern

Gemäß dem Koeffizienten von Pi und dem Radius der...

MySQL-Backup-Tabellenvorgang basierend auf Java

Der Kern ist mysqldump und Runtime Der Vorgang is...

Verständnis und Anwendungsanalyse der pessimistischen und optimistischen Sperre von MySQL

In diesem Artikel werden die pessimistische und d...

Einige Vorschläge für HTML-Anfänger und Neulinge, Experten können sie ignorieren

Gefühle: Ich bin Backend-Entwickler. Manchmal fühl...

Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS

Voraussetzung: content="width=750" <...

Schreiben Sie Ihr HTML so, um Ihren Code kompatibler zu machen

Beispielsweise Benutzer, die eine Bildschirmleseso...

So löschen Sie die MySQL-Registrierung

Spezifische Methode: 1. Drücken Sie [ Win+R ], um...

Häufig verwendete englische Schriftarten für die Webseitenerstellung

Arial Arial ist eine serifenlose TrueType-Schrifta...

Die Reihenfolge der Ereignisausführung in der Knotenereignisschleife

Inhaltsverzeichnis Ereignisschleife Ereignisschle...

Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)

Seit ich den Mac zurückgegeben habe, liegt mein u...

Implementierung des CSS Fantastic Border Animation-Effekts

Heute habe ich auf der Blog-Site shoptalkshow ges...

Einfaches Webdesign-Konzept – Farbabstimmung

(I) Grundkonzepte der Farbabstimmung auf Webseiten...

Vue implementiert Modal-Komponente basierend auf Teleport

Inhaltsverzeichnis 1. Lernen Sie Teleport kennen ...

Vue realisiert problemlos Wasserzeicheneffekte

Vorwort: Verwenden Sie den Wasserzeicheneffekt im...

Implementierung der Formatierung von Partitionen und der Einbindung in Centos7

Unter Linux treten häufig Situationen auf, in den...