Electron 可以使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。我們可以把它看作一個 Node. js 的變體，它專注於桌面應用而不是 Web 服務器端。
從開發的角度來看，Electron 應用本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同，應用的入口是 package.json 文件。 一個簡單的 Electron 項目包含三個基本文件：package.json，index.hmtl，main.js 。
package.json是Node.js項目的配置文件。index.html是桌面應用的界面頁面。main.js是應用的啓動入口文件。
創建項目
我們在指定路徑中新建一個名爲 my_electron 的文件夾作爲項目根目錄，然後在命令工具中使用 cd 命令，將當前目錄更改爲項目根目錄：
>cd C:\Users\lu\Desktop\my_electron
如下圖所示：
然後執行 npm init 命令進行項目初始化，如下圖所示：
命令執行成功後，項目根目錄下會創建一個 package.json 文件，如果全部選擇默認配置，則可以直接執行 npm init -y 命令。
修改package.json
我們可以修改創建好的 package.json 文件，在 scripts 中添加腳本命令，如下所示：
{
"name": "blogs",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ./src/main.js"
},
"keywords": [],
"author": "Silenzio",
"license": "ISC",
"devDependencies": {
"electron": "^10.1.2"
}
}
我們在這個文件中指定了一個啓動腳本，之後可以通過這個腳本來啓動程序，它將用 electron 來啓動 src 目錄下的 main.js 文件。
還可以看到在這個文件中的 "devDependencies" 中有一項 "electron": "^10.1.2"，表示將 electron 安裝成功並添加到依賴中。
創建main.js文件
我們在項目的根目錄下創建一個 src 文件夾，並在這個文件夾中創建一個 main.js 文件，這個文件就是應用的啓動入口文件。
Electron 應用使用 JavaScript 開發，其工作原理和方法與 Node.js 開發相同。electron 模塊包含了 Electron 提供的所有 API 和功能，引入方法和 Node.js 模塊一樣，都可以通過 require() 來引入，例如：
const electron = require('electron')
electron 模塊所提供的功能都是通過命名空間暴露出來的。例如 electron.app 負責管理 Electron 應用程序的生命週期，electron.BrowserWindow 類負責創建窗口等。
示例：
例如我們要在 main.js 文件中創建窗口，內容如下所示：
// 引入electron
const {app, BrowserWindow} = require('electron');
let win;
function createWindow() {
// 創建瀏覽器窗口
win = new BrowserWindow({
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true,
},
});
// 加載index.html文件
win.loadFile('../html/index.html');
// 自動打開開發者工具
win.webContents.openDevTools();
// 當 window 被關閉，這個事件會被觸發
win.on('closed', () => {
win = null;
});
}
// Electron 會在初始化後並準備，創建瀏覽器窗口時，調用這個函數
app.on('ready', createWindow);
// 當全部窗口關閉時退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
添加index.html文件
在上面的 main.js 文件中我們指定了一個 index.html 文件，這個 html 文件，就是程序的主頁面。
所以我們還需要在項目的根目錄下創建一個 html 文件夾，在這個文件夾中創建一個 index.html 文件，內容如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my_electron</title>
</head>
<body>
<h1>你好，俠課島!</h1>
</body>
</html>
啓動項目
在完成了項目的創建、初始化項目、安裝 electron 、創建必要文件這幾個步驟之後，現在我們就可以開始啓動項目啦。因爲我們已經在 package.json 文件中設置了腳本命令，所以只需要直接在項目根目錄下直接如下指令即可：
npm start
命令執行完成之後，程序後被啓動，如下圖所示：
此時桌面上啓動了一個獨立的程序， 這個程序中界面的左邊顯示的是渲染後的 index.html ，界面的右邊部分則是 Chrome/Chromium 瀏覽器的開發者選項。因爲我們在 main.js 文件中設置了 win.webContents.openDevTools(); ，所以在啓動程序時會自動打開開發者工具。如果需要開發者工具，只需要將這句代碼註釋，然後再次啓動程序即可。