先看看Electron的简介知道他是干嘛的
https://www.electronjs.org/docs/tutorial/quick-start
简介
Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店进行分发。
通常，你可以使用操作系统 (OS) 特定的本地应用程序框架来创建一个桌面应用程序。 Electron 可以使用你了解的技术来编写应用程序。
嗯 ，简单来说就是可以用我们web的技术来开发桌面应用，还是跨平台
基本环境
在使用 Electron 之前，您需要安装 Node.js。 我们建议您安装最新可用的
LTS或Current 版本。请使用为你平台预构建的 Node.js 安装器来进行安装。 否则，您可能会遇到与不同开发工具不兼容的问题。
要检查 Node.js 是否正确安装，请在您的终端输入以下命令：
node -v npm -v 复制这两个命令应输出了 Node.js 和 npm 的版本信息。 如果这两个命令都执行成功，你就可以开始准备安装 Electron了。
上面这段就是需要node环境了，关于node环境安装可以参考我的另一篇博客
https://www.cnblogs.com/makalochen/p/13762163.html
最后安装好了，如图
创建基本应用程序
从开发的角度来看，Electron 应用本质上是一个 Node.js 应用。 这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。 最小的 Electron 应用程序具有以下结构：
my-electron-app/
├── package.json
├── main.js
└── index.html
让我们根据上面的结构创建一个基本的应用程序。
安装 Electron
为您的项目创建一个文件夹并安装 Electron：
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
npm init -y初始化项目
npm i --save-dev electron 安装
正常下载安装，你会发现巨慢
关于安装 Electron慢的解决办法
参考：
https://blog.csdn.net/ghosind/article/details/105152114
https://github.com/cnpm/cnpmjs.org/issues/1530
设置环境变量
npm config set ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
查看
npm config list
再次安装
npm i --save-dev electron
你会发现快了好多
创建主脚本文件
主脚本指定了运行主进程的 Electron 应用程序的入口(就我们而言，是 main.js 文件)。 通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。
主脚本可以如下所示：
main.js文件
//为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，您从 electron 包导入了 app 和 BrowserWindow 模块 。
const { app, BrowserWindow } = require('electron')
//在此之后，你定义了一个创建 新的浏览窗口的函数并将 nodeIntegration 设置为 true，将 index.html 文件加载到窗口中（第 12 行，稍后我们将讨论该文件）
function createWindow () {
const win = new BrowserWindow({
800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
//你通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口。
app.whenReady().then(createWindow)
//您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。 由于操作系统的 窗口管理行为 ，此监听器在 macOS 上是禁止操作的
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
//您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。 例如，在首次启动应用程序后或重启运行中的应用程序
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
创建网页
这是应用程序初始化后您想要显示的页面。 此网页代表渲染过程。 您可以创建多个浏览器窗口，每个窗口都使用自己的独立渲染进程。 每个窗口都可以通过 nodeIntegration 选项完全访问 Node.js API。
index.html 页面如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
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>.
</p>
</body>
</html>
修改package.json 文件
您的 Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。 您的应用程序的主脚本是 main.js，所以相应修改 package.json 文件：
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js"
}
注意：如果未设置
main字段，Electron 将尝试加载包含在package.json文件目录中的index.js文件。
注意：
author和description字段对于打包来说是必要的，否则运行npm run make命令时会报错。
默认情况下， npm start 命令将用 Node.js 来运行主脚本。 要使用 Electron 来运行脚本，您需要将其更改为这样：
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
例：
{
"name": "my-electron-app",
"version": "0.1.0",
"description": "test electron .....",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "makalo",
"license": "ISC",
"devDependencies": {
"electron": "^11.2.1"
}
}
运行应用
npm start
运行后如图
感觉很像typora 有没有
打包并分发应用
分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。
-
导入 Electron Forge 到您的应用文件夹：
npx @electron-forge/cli import ✔ Checking your system ✔ Initializing Git Repository ✔ Writing modified package.json file ✔ Installing dependencies ✔ Writing modified package.json file ✔ Fixing .gitignore We have ATTEMPTED to convert your app to be in a format that electron-forge understands. Thanks for using "electron-forge"!!!
-
创建一个分发版本：
npm run make > my-gsod-electron-app@1.0.0 make /my-electron-app > electron-forge make ✔ Checking your system ✔ Resolving Forge Config We need to package your application before we can make it ✔ Preparing to Package Application for arch: x64 ✔ Preparing native dependencies ✔ Packaging Application Making for the following targets: zip ✔ Making for target: zip - On platform: darwin - For arch: x64如果遇到这个
去检查一下
package.json里面的description和author这两个都不能为空Electron-forge会创建out文件夹，您的软件包将在那里找到：// MacOS 示例 out/ ├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip ├── ... └── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app
至此基本的helloworld 应用已经全部搞定