参考官方文档流程 快速入门 | Electron
建议先全局安装electron，npm install -g electron 开发过程中可以在本地开发安装
使用electron快速创建一个web页面 ，参考官方demo 实例 electron-quick-start
第一步：
- mkdir my-electron-app && cd my-electron-app 创建一个文件夹并且进入文件
- npm init 初始化文件
- npm install --save-dev electron 安装electron环境
- 最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的
scripts字段下增加一条start命令：{
"scripts": {
"start": "electron ."
}
}
第二步：
在你本地的文件中创建 main.js 入口文件，引入electron
const { app, BrowserWindow } = require("electron");
app.whenReady().then(() => {
// 创建一个web窗口
const mainWin = new BrowserWindow({
width: 600,
height: 400,
});
// 引入页面要展示的文件
mainWin.loadFile("index.html");
// 监听当前窗口关闭要做的事情
mainWin.on("close", () => {
console.log("close");
});
});
// 监听所有窗口关闭要做的事情
app.on("window-all-closed", () => {
console.log("window-all-closed");
app.quit(); // 窗口关闭api
});
第三步：
本次创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>桌面应用</div>
</body>
</html>第四步：
运行 npm start 命令，即可展示如下界面
