[Elektron] So erstellen Sie ein Elektronenprojekt:

---

[Offizielle Electron-Website] https://www.electronjs.org/zh/docs/latest/api/app

【1】npm init @quick-start/electron (empfohlen)

Führen Sie die folgenden Befehle in der Befehlszeile aus:

npm init @quick-start/electron

Dieser Befehl installiert und führt das Scaffolding-Tool create-electron aus . Sie sehen Hinweise für einige optionale Funktionen, wie etwa Frameworks (Vue, React, …) und TypeScript-Unterstützung:
Befolgen Sie nach dem Erstellen des Projekts die Anweisungen, um Abhängigkeiten zu installieren und das Electron-Programm zu starten:

[2] Warehouse klonen, Schnellstart

#1. 克隆项目；
git clone https://github.com/electron/electron-quick-start

#2. 进入这个项目下；
cd electron-quick-start

#3. 安装依赖；
npm install

#4. 运行项目；
npm start

Öffnen Sie das Schnellstartprojekt. Es gibt hauptsächlich die folgenden Dateien:
(1). index.html, Rendering-Prozess;
(2). render.js, Rendering-Prozess, referenziert in index.html;
(3). main.js, Die Hauptprozess;
(4). preload.js, das den Abschluss des DOM-Ladens überwacht, wird im Hauptprozess aufgerufen.

[3] Bauen Sie das Projekt mit einem Gerüst auf

Electron-Forge ist ein Gerüst für den Aufbau von Elektronenprojekten, nicht nur für laufende Projekte, sondern auch für Verpackungsprojekte.
Offizielle Website: Erste Schritte – Electron Forge

#如果电脑上安装了安装了最新版本的 node 可以使用 npx 创建项目，如果安装了 yarn 也可以使用 yarn 创建项目；
npx create-electron-app my-new-app或者yarn create electron-app my-new-app

#运行项目；
cd my-new-app  // 进入项目
npm start  // 启动项目

Wenn es nicht möglich ist, das Projekt mit npx oder Yarn zu installieren, kann es auf herkömmliche Weise erfolgen.

// 安装脚手架
npm install -g @electron-forge/cli
 
// 初始化项目
electron-forge init my-new-app
 
// 进入项目
cd my-new-app
 
// 启动项目
npm start

【4】 Erstellen Sie manuell ein Projekt

1. Erstellen Sie einen neuen Projektordner;
2. Erstellen Sie eine neue Rendering-Prozessdatei index.html und die Hauptprozessdatei main.js.
3. Initialisieren Sie das Projekt und erstellen Sie package.json;

npm init 
#请注意，package.json中的主文件必须名为main.js。 

4. Installieren Sie Electron im Projekt. Obwohl Electron global installiert ist, gibt es beim Schreiben des Codes keine Eingabeaufforderung. Sie müssen daher das Projekt eingeben, um es zu installieren, damit eine Eingabeaufforderung angezeigt wird.

cnpm i electron --save-dev

5. Schreiben Sie den Code des Hauptprozesses main.js.

const {
    
     app, BrowserWindow } = require("electron");
const path = require("path");
 
const createWindow = ()=>{
    
    
    // 创建窗口
    const mainWindow = new BrowserWindow({
    
    
        width: 800,
        height: 600
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname,"index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');
}
 
// 监听应用的启动事件
app.on("ready",createWindow);
 
// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed",()=>{
    
    
    // 非MacOS直接退出
    if(process.platform!="darwin"){
    
    
        app.quit();
    }
});
 
// 点击MacOS底部菜单时重新启动窗口
app.on("activate",()=>{
    
    
    if(BrowserWindow.getAllWindows.length==0){
    
    
        createWindow();
    }
})

6. Führen Sie eslint ein, um den Code zu überprüfen.

(1). 安装eslint；

cnpm install -g eslint
(2). 在项目中初始化eslint；

eslint --init
初始化时会有各种选项，选项可以参考下面的结果。 

7. Führen Sie das Projekt aus.

electron .