共计 2391 个字符，预计需要花费 6 分钟才能阅读完成。
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();，所以在启动程序时会主动关上开发者工具。如果须要开发者工具，只须要将这句代码正文，而后再次启动程序即可。
