禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
⚠️注意：
1️⃣原视频打包时，是使用electron-builder打包，使用electron-builder打包，打包时要访问github需要修仙术才能访问。
2️⃣本笔记，使用Electron Forge进行打包，使用Electron Forge不需要访问github更友好。在Electron 官网中也推荐使用这种方式 👉Electron
一、Electron是什么
简单的一句话，就是用html+css+js+nodejs+（Native Api）做兼容多个系统（Windows、Linux、Mac）的软件。
官网解释如下(有点像绕口令)：
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
二、Elemtron流程模型
三、Electron搭建工程，若成功则输出123
3.1 准备
可参考Electron官网地址
需要node和npm，先检测是否安装。
node -vnpm -v
3.2 项目初始化
命令行创建
mkdir my-electron-app && cd my-electron-appnpm init或者，手动快速创建
package.json文件
{ \"name\": \"my-electron-app\", \"version\": \"1.0.0\", \"description\": \"test Electron\", \"main\": \"main.js\", \"author\": \"Bin9153\", \"license\": \"MIT\"}有几条规则需要遵循：
entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。
3.3 安装 Electron
npm install --save-dev electron//或者npm install electron -D3.4 配置并启动
在 package.json配置文件中的scripts字段下增加一条start命令：
{ \"scripts\": { \"start\": \"electron .\" }}这一步，完整的package.json
{ \"name\": \"my-electron-app\", \"version\": \"1.0.0\", \"main\": \"main.js\", \"scripts\": { \"start\": \"electron .\" }, \"author\": \"bin9153\", \"license\": \"ISC\", \"description\": \"electron test\", \"dependencies\": { \"electron\": \"^31.2.0\" }}代码解析：
创建main.js。
在main.js里写入
console.log(123)
再运行！
npm start注意：
- 先创建main.js，否则报错
- 如果main.js里没写输出（或其他代码）则，启动了运行窗口也不容易看出变化
成功输出123，工程搭建完成。
四、开始制作程序
4.1 案例1：做一个简易网页程序
点击可以查看，browser-window配置项的开发文档
在main.js里写入
const { app, BrowserWindow} = require(\'electron\')app.on(\'ready\', () => { //当app准备好后，执行createWindow创建窗口 const win = new BrowserWindow({ width: 800,//窗口宽度 height: 600,//窗口高度 autoHideMenuBar: true,//自动隐藏菜单档 alwaysOnTop: true,//置顶 x: 0,//窗口位置x坐标 y: 0//窗口位置y坐标 }) //加载一个远程页面 win.loadURL(\'https://blog.csdn.net/qq_33650655/article/details/140353815\')})运行
npm start
成功显示页面。
4.2 案例2：做一个本地程序（不是远程链接页面，是自己写的页面）
4.2.1 是本地程序，所以创建新的页面
新建pages目录，创建页面，这里就像写前端一样了。index.html,index.css
index.html里
<!DOCTYPE html><html lang=\"en\"><head> 
