前言

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架
Electron能帮助您快速创建 在Windows、macOS和Linux上运行的跨平台应用
本文章参照官方所写，详细请看官方文档：Electron官方文档
系统要求：Windows8.1（即以上）

安装node.js

首先要下载并安装 node.js ：Download Node.js®
安装完成后输入

node -v
//出现版本号就算安装成功

在国内为了更快的安装推荐切换国内源

npm config set registry https://registry.npm.taobao.org

其源会写入配置文件.npmrc里

安装Electron框架

npm install --save-dev electron -g

然后设置Electron国内源（如果网络不卡的话不用设置）

npm config set registry=https://registry.npmmirror.com
npm config set disturl=https://registry.npmmirror.com/-/binary/node
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/
npm config set electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

这是正常的安装方法，但是由于网络问题，容易在安装时卡死，如果上述方法安装失败请看下面的方法
安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装完成后输入cnpm -v验证是否安装成功

如果安装报错，请更新一下npm

npm install -g npm@10.2.4

如果是windows系统，在powershell使用cnpm会报错，在cmd中使用没问题
然后在安装Electron框架

cnpm install electron -g

然后在安装electron-builder框架

cnpm install electron-builder -g

在尝试上面的步骤，设置国内源（如果网络不卡的话不用设置），如果设置失败找到.npmrc文件，并增加(如果有存在就不增加)
.npmrc文件在用户目录下（在资源管理器中输入%USERPROFILE%即刻到达用户文件夹）

registry=https://registry.npmmirror.com
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

创建项目

这里我们先创建node.js项目（自己创建文件夹）

npm init

根据提示创建package.json文件（也可以直接全部Enther，后续在改）
创建index.js、electron-builder.yml

编写代码

package.json

设置package.json文件

{
  "name": "这里填项目名称",
  "version": "这里填项目版本号",
  "description": "项目描述",
  "productName": "这里填打包名称",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "win-dist1": "electron-builder --win --x64"
  },
  "author": "me",
  "license": "ISC"
}

然后在项目文件夹下执行

cnpm install electron --save-dev
cnpm install electron-builder --save-dev

index.js

在index.js写入如下代码

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('node:path')

const gotTheLock = app.requestSingleInstanceLock()

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1220,
    height: 720,
    title: "设置窗口标题",
    icon: path.join(__dirname, '设置网站图标路径'),
    webPreferences: {
      webSecurity: false
    }
  })

  //隐藏顶部菜单
  Menu.setApplicationMenu(null)
  //设置网站url
  //例如mainWindow.loadURL("https://sober-up.cn/")
  mainWindow.loadURL("设置网页地址")
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
if (!gotTheLock) {
  app.quit()
} else {
  app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
      // 在 macOS 系统内, 如果没有已开启的应用窗口
      // 点击托盘图标时通常会重新创建一个新窗口
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
}

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

electron-builder.yml

在electron-builder.yml写入如下代码

appId: 这里填应用名称
productName: 这里填安装后显示的标题
directories:
  output: './dist'
  buildResources: 'build'
  app: './'

win:
  icon: '这里填图标路径'

mac:
  icon: '这里填图标路径'

linux:
  icon: '这里填图标路径'

nsis:
  oneClick: false
  allowToChangeInstallationDirectory: true

打包项目

在项目目录里输入查看是否运行成功

npm run start

在项目目录里输入进行编译exe

npm run win-dist1

执行完成后你就能在dist目录下找到编译好的文件
如果编译卡死，重新设置一下镜像源

结尾

以上就是作者制作Windows应用最简单的方法，如有不对请在评论区指出