Electron 可以讓你使用純 JavaScript 調用豐富的原生(操作系統) APIs 來創造桌面應用。 你可以把它看作一個 Node. js 的變體，它專注於桌面應用而不是 Web 服務器端。
這不意味着 Electron 是某個圖形用戶界面（GUI）庫的 JavaScript 版本。 相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。
注意: 獲取該示例的代碼倉庫: 立即下載並運行 。
從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同，應用的入口是 package.json 文件。 一個最基本的 Electron 應用一般來說會有如下的目錄結構：
your-app/
├── package.json
├── main.js
└── index.html
為你的新Electron應用創建一個新的空文件夾。 打開你的命令行工具，然后從該文件夾運行npm init
npm init
npm 會幫助你創建一個基本的 package.json 文件。 其中的 main 字段所表示的腳本為應用的啟動腳本，它將會在主進程中執行。 如下片段是一個 package.json 的示例：
{ "name": "your-app", "version": "0.1.0", "main": "main.js" }
注意：如果 main 字段沒有在 package.json 中出現，那么 Electron 將會嘗試加載 index.js 文件（就像 Node.js 自身那樣）。 如果你實際開發的是一個簡單的 Node 應用，那么你需要添加一個 start 腳本來指引 node 去執行當前的 package：
{ "name": "your-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "node ." } }
把這個 Node 應用轉換成一個 Electron 應用也是非常簡單的，我們只不過是把 node 運行時替換成了 electron 運行時。
{ "name": "your-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron ." } }
安裝 Electron
現在，您需要安裝electron。 我們推薦的安裝方法是把它作為您 app 中的開發依賴項，這使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夾中運行下面的命令：
npm install --save-dev electron
開發一個簡易的 Electron
Electron apps 使用JavaScript開發，其工作原理和方法與Node.js 開發相同。 electron模塊包含了Electron提供的所有API和功能，引入方法和普通Node.js模塊一樣：
const electron = require('electron')
electron 模塊所提供的功能都是通過命名空間暴露出來的。 比如說： electron.app負責管理Electron 應用程序的生命周期， electron.BrowserWindow類負責創建窗口。 下面是一個簡單的main.js文件，它將在應用程序准備就緒后打開一個窗口：
const { app, BrowserWindow } = require('electron') function createWindow () { // 創建瀏覽器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加載index.html文件 win.loadFile('index.html') } app.whenReady().then(createWindow)
您應當在 main.js 中創建窗口，並處理程序中可能遇到的所有系統事件。 下面我們將完善上述例子，添加以下功能：打開開發者工具、處理窗口關閉事件、在macOS用戶點擊dock上圖標時重建窗口，添加后，main. js 就像下面這樣：
const { app, BrowserWindow } = require('electron') function createWindow () { // 創建瀏覽器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 並且為你的應用加載index.html win.loadFile('index.html') // 打開開發者工具 win.webContents.openDevTools() } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // 部分 API 在 ready 事件觸發后才能使用。 app.whenReady().then(createWindow) // Quit when all windows are closed. app.on('window-all-closed', () => { // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出， // 否則絕大部分應用及其菜單欄會保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上，當單擊dock圖標並且沒有其他窗口打開時， // 通常在應用程序中重新創建一個窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) // In this file you can include the rest of your app's specific main process // code. 也可以拆分成幾個文件，然后用 require 導入。
最后，創建你想展示的 index.html（或者使用自己的項目npm run build打包后的index.html）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
啟動你的應用
在創建並初始化完成 main.js、 index.html和package.json之后，您就可以在當前工程的根目錄執行 npm start 命令來啟動剛剛編寫好的Electron程序了。
轉自：https://www.electronjs.org/docs/tutorial/first-app