1.简介
官网解释：Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。
2.开发/学习前的准备
在使用Electron进行开发之前，您需要安装 Node.js，这里我们就不介绍如何安装Node.js。 在终端输入来检查是否正确安装Node.js:
node -v
npm -v
3.创建一个简单的应用程序
新建文件夹electronDemo并初始化 npm 包,并生成一个package.json文件
cd electronDemo
npm init
然后，将 electron 包安装到应用的开发依赖中。
npm install --save-dev electron
安装成功后，在package.json文件中会生成如下代码：
"devDependencies": {
"electron": "^13.1.9"
}
同时，在package.json配置文件中的scripts字段下增加一条start命令：
{ "scripts": { "start": "electron ." } }
在项目根目录下创建一个名为index.html的文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。
同时新建一个js文件，将页面加载进应用窗口中:
//app 控制应用程序的生命周期
//BrowserWindow 创建和管理应用程序窗口
const {app,BrowserWindow}=require("electron");
function createWindow () {
// 设置应用程序窗口的大小
const win = new BrowserWindow({
width: 800,
height: 600
})
// 加载应用程序的也没
win.loadFile('index.html')
}
// 在 Electron 中，只有在 `app` 模块的 `ready`事件被激发后才能创建浏览器窗口，通过使 用 `app.whenReady()`API来监听此事
app.whenReady().then(() => {
createWindow()
})
把我们编写好的js文件引入到html文件中，执行npm start 命令我们会发现浏览器会自动打开一个窗口，展示我们所编写的页面：
这样，一个简单的应用程序就做好了！
