Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

一.准备工作

安装node
electron环境搭建
a.npm命令安装electon

npm i electron -g
or
npm i electron --save-dev

安装electron-packager，一个用于打包electron应用的工具，只是打包成各个平台下可执行文件，并不是安装包

npm i electron-packager -g
or
npm i electron-packager --save-dev

安装electron-builder打包成安装包

npm i electron-builder -g
or
npm i electron-builder --save-dev

二.创建一个应用

创建一个electron应用，我们只需要3个文件。
index.html
main.js
package.json
index.html是我们想要显示的页面，main.js是应用的入口，package.json是npm项目的配置文件。
一个最基本的electron应用一般来说有如下的目录结构：

your-app/
├── package.json
├── main.js
└── index.html

在该文件夹目录下打开命令行工具，然后运行npm init

npm init

npm会帮助你创建一个基本的package.json文件，其中的main字段所表示的脚本为应用的启动脚本，start脚本表示执行当前的package,下面是package.json的实例：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div>我是第一个electron应用，哈哈哈哈</div>
    </body>
</html>

main.js
Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样：

const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。比如说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个main.js文件，它将在应用程序准备就绪后打开一个窗口：

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

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

启动应用
在创建并初始化完成main.js,index.html和package.json后，就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的electon程序了。启动之后就是酱样子的~

三.electron-packager打包可执行文件

首先我们继续使用上面的项目文件，只需要在package.json中添加一个字段。 electron-packager的打包基本命令是：

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

参数说明：

sourcedir：项目所在路径
appname：应用名称
platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
arch：决定了使用 x86 还是 x64 还是两个架构都用
optional options：可选选项
我们可以在命令行中直接输入
electron-packager . ElectronDemo --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules
或者是在package.json中添加代码：

"scripts": {
    "package": "electron-packager . ElectronDemo --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules"
  },

然后在命令行中执行 npm run package
打包成功后我们可以在out文件夹里看到生成了.exe，运行该文件，并且没有报错，说明打包成功。

elelctron-packager打包只是打包成各个平台下可执行文件，并不是安装包，如果需要打包成安装包之类的可以参考electron-builder。

四.用electron-packager打包react,vue项目

当我们的项目完成时，我们执行打包指令，比如我的是npm run build,会在build文件夹下面生成如下的结构：

此时我们打开index.html文件，一片白屏，此时我们可以在package.json中添加"homepage": "./",此时我们在执行npm run build，应该就可以看到内容了。
在index.html可以看到内容的情况下，我们在build文件夹下面在新建main.js和package.json文件，mian.js的内容和上面提到的保持一致，package.json中的内容也和上面保持一致。此时npm run dist就成功了

五.electron-builder打包安装包

继续使用创建一个应用时用到的项目文件，main.js，index.html和package.json这3个文件

在项目中安装electron-builder

npm i electron-builder --save-dev

在package.json文件中添加一下代码:

"build": {
    "appId": "com.example.app",
    "mac": {
      "target": [ // 目标包类型
        "dmg",
        "zip"
      ]
    },
    "win": {
      "target": [ // 目标包类型
        "nsis",
        "zip"
      ]
    }
  },
 "scripts": {
    "dist": "electron-builder"
  },

在命令行中执行 npm run dist 此时如果顺利的话在目录下会有个dist文件夹

此时我们看到里面有个exe的程序安装包，我们双击打开后可以看到页面就是成功啦~（ps:此时双击打开时会默认安装完毕，根本不给人反应的时间，也不会给大家选择安装目录的机会)。下面会提到如何设置用户可选择安装目录

桌面上出现我们安装好的应用啦~

ps:lectron-builder有2个依赖包winCodeSign和nsis，网络不好可能会出现包安装超时的情况，这个时候就需要手动安装。

各操作系统包的位置如下：

macOS ~/Library/Caches/electron-builder
linux ~/.cache/electron-builder
windows %LOCALAPPDATA%\electron-builder\cache

a.下载nsis包，下载地址https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3.2/nsis-3.0.3.2.7z

b.下载wincodesign包，下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z
下载nsis-resources包，下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z

c.在%LOCALAPPDATA%（C:\Users\wb-zy533658\AppData\Local）目录下新建electron-builder\Cache<br>

d.把下载好的zip解压到第三步的目录下，根据错误提示的版本建立对应的文件夹，并把文件移动到目录下，如图:

4.如果想要自定义安装路径应该怎么做呢，需要在buid字段里面添加个nsis的子节点,其中有2个配置项是关键点，其余的就随意啦~

oneClick设置为false
allowToChangeInstallationDirectory设置为true

"build": {
    "appId": "com.example.app",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "img.ico"
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "img.ico" // 更换桌面上生成的图标
    },
    "nsis": {
      "oneClick": false, // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true, // 创建开始菜单图标
      "installerIcon": "test.ico", // 安装图标
      "uninstallerIcon": "xxx.ico", // 卸载图标
      "installerHeaderIcon": "xxx.ico" // 安装时头部图标
    },
    "scripts": {
      "dist": "electron-builder"
    }
  }

此时在执行npm run dist，我们在看看效果是怎么样的
我们在installerIcon配置项中配置了自己的图标，在下图中我们看到已经生效了

此时我们在双击.exe文件看一下会不会出现安装路径选项呢？果然配置onClick和allowToChangeInstallationDirectory选项后出现自定义安装路径啦~

ps:如果想要更换应用安装完成后生成的图标中添加一个字段，注意图片要.ico格式的并且图片大小要256*256

"build": {
    "appId": "com.example.app",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "img.ico" // 更换生成的图标
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "img.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "installerIcon": "test.ico"
    }
  },

这就是生效后的桌面图标

六.ectron-builder打包时出现的错误

写在最后，之前打包时还出现了一个错误信息，说有个入口文件'build/electron.js'没找到

此时项目结构是这样的

也不知道是哪里不对，然后我就根据报错信息根目录下新建了一个build文件夹，里面在建了一个electron.js文件，文件内容和main.ja保持一致，并且在package.jso build字段下面添加一个files字段，此时在npm run dist居然成功了~

"build": {
    "appId": "com.example.app",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "img.ico" // 更换生成的图标
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "img.ico"
    },
      "files": [
      "index.html",
      "main.js",
      "package.json",
      "build/electron.js"
    ]
  },