Electron-Installation

Bevor Sie Electron installieren, müssen Sie zwei grundlegende Umgebungen vorbereiten:

1. Node.js

Electron ist ein Framework, das auf Node.js basiert, daher muss Node.js zuerst installiert werden.

Prüfen Sie, ob es installiert ist:

node -v
npm -v

Wenn eine Versionsnummer ausgegeben wird, bedeutet das, dass es installiert ist.
Wenn nicht, gehen Sie bitte zuroffiziellen Node.js-Website undladen SieLTS (Long-Term-Support-Version) herunter.。

Nach der Installation ist npm (Node-Paketmanager) automatisch im System enthalten.

Wenn Sie mit Node.js nicht vertraut sind, können Sie Folgendes zurate ziehen:Node.js

Tutorial.

2. npm oder yarn

Die Installation von Electron setzt npm oder yarn für die Paketverwaltung voraus.

Sie können wählen:

# 使用 npm
npm install electron --save-dev

# 或使用 yarn
yarn add electron --dev

Electron installieren

Es gibt zwei Möglichkeiten, Electron zu installieren:Globale InstallationundInstallation innerhalb des Projekts。
EmpfohlenInstallation innerhalb des Projekts(sicherer und einfacher zu warten).

1. Installation innerhalb des Projekts

# 创建一个项目文件夹
mkdir my-electron-app
cd my-electron-app

# 初始化 Node 项目
npm init -y

# 安装 Electron
npm install electron --save-dev

Nach erfolgreicher Installation erscheint im Projektverzeichnis Folgendes:

node_modules/
package.json
package-lock.json

Überprüfen, ob die Installation erfolgreich war

Erstellen Sie eine einfache Electron-Startdatei:

main.js

Beispiel

const { app, BrowserWindow } = require('electron')

function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
}

app.whenReady().then(() => {
createWindow()
})

index.html

Beispiel

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel(example.com)</title>
</head>
<body>
<h1>Hallo, Electron!</h1>
<p>BEISPIEL Electron-Test.</p>
</body>
</html>

Fügen Sie dann einen Startbefehl in package.json hinzu:

"scripts": {
  "start": "electron ."
}

Ausführen:

npm start

Wenn ein Desktop-Fenster mit "Hello, Electron!" darin erscheint, bedeutet das, dass die Installation erfolgreich war/p>

Häufige Installationsprobleme und Lösungen

Problem	Grund	Lösung
`npm ERR! code ELIFECYCLE`	Berechtigungs- oder Cache-Problem	Ausführung versuchen`npm cache clean --force`
`electron failed to install correctly`	Netzwerk- oder Download-Quellen-Timeout	Mit dem Taobao-Mirror installieren (wie folgt)

Verwenden Sie einen inländischen Mirror, um die Installation zu beschleunigen

Das Electron-Download-Paket ist sehr groß (zig MB) und kann in China ein Timeout verursachen. Sie können den Taobao-Mirror verwenden:

# 临时设置
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm install electron --save-dev

Oder ändern Sie dauerhaft die npm-Quelle:

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

Optionale Tools

Tool-Name	Funktion	Installationsbefehl
`electron-builder`	In einen Installer verpacken (.exe / .dmg usw.)	`npm install electron-builder --save-dev`
`electron-reload`	Automatisch neu laden nach Änderung des Codes	`npm install electron-reload --save-dev`
`electron-forge`	Schnelle Build-Vorlage	`npx create-electron-app my-app`

Weitere Erweiterungen