Electron：项目创建

初始化项目

通过 vscode打开文件夹，执行 npm init命令，初始化项目目录，唯一注意的是入口文件需要是main.js而不是默认的index.js，其余选项自定义即可。

安装Electron包

由于国内网络问题，可能下载过慢或者下载失败，可以提前将npm改为国内镜像地址

参照底部勘误中 (#N001) 解决

在项目根目录执行命令：

# 安装electron主包
npm install --save-dev electron
# 安装electron打包工具
npm install --save-dev @electron-forge/cli
# 导入
npx electron-forge import

修改NPM脚本

将package.json中的script中增加"start": "electron .",，修改结束后该文件如下：

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "Electron Demo",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "aine",
  "license": "MIT",
  "devDependencies": {
    "electron": "^19.0.8"
  }
}

创建入口点文件(main.js)

在项目跟目录创建main.js文件，内容如下:

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })

    win.loadFile('index.html')
}

app.whenReady().then(() => {
    createWindow()
})

创建页面文件(index.html)

在项目根目录创建html文件夹，在该文件夹中创建 index.html文件，其内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
</head>

<body>
    <h1>It's Working!</h1>
</body>
</html>

测试运行

直接执行 npm run start或 electron .，即可打开electron窗口

测试打包

直接执行 npm run make，在根目录的out目录中即生成了可执行文件