electron 安装ElementPlus electron 安装exe

1.安装 node.js

进入Node官网下载node.js，安装，已经集成了npm就不需要重复安装了

2.配置环境变量

在命令行窗口输入 node -v 查看node是否安装成功；输入 npm -v 查看npm是否安装成功

3.安装 electron

g表示全局变量（系统环境）

已翻墙的可以直接通过npm指令安装，未翻墙的需要通过cnpm安装：

（1）安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）通过cnpm安装electron

cnpm install -g electron

安装electron组件（node_modules）

cnpm install electron --save-dev

安装完成后 electron -v 查看是否安装成功

安装electron-packager

npm install -g electron-packager

4.创建electron程序

直接复制粘贴index.html 、app.js 、package.json 3个文件到程序文件夹中；

（1）package.json 如果没有现成的可以在命令窗口中进入程序文件夹中

cd f:\xx\xx\

然后 npm init 创建package.json文件；没有的直接回车过

创建好的文件需要再添加新的信息，直接复制进去（scripts）：

"start": "electron ."

以下2个可加可不加，为electron版本号（生成文件的时候会用到）

"dependencies": {
    "electron-prebuilt": "^1.7.9"
  },
  "devDependencies": {
    "electron-prebuilt": "^1.7.9"
  },

{
  "name": "app",
  "version": "1.0.0",
  "description": "SUN",
  "main": "app.js",
  "dependencies": {
    "electron-prebuilt": "^1.7.9"
  },
  "devDependencies": {
    "electron-prebuilt": "^1.7.9"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "SunXin",
  "license": "ISC"
}

（2）在app.js 中添加如下代码：

const {app, globalShortcut, BrowserWindow} = require('electron');
let win;
let windowConfig = {
    width:800,
    height:600
};
function createWindow(){
    win = new BrowserWindow(windowConfig);
    win.loadURL(`file://${__dirname}/index.html`);
    //开启调试工具
    win.webContents.openDevTools();
    //全屏
    win.setFullScreen(true);
    globalShortcut.register('ESC', () => {
        win.setFullScreen(false);
    });
    //关闭
    win.on('close',() => {
        //回收BrowserWindow对象
        win = null;
    });
    win.on('resize',() => {
        win.reload();
    })
}

app.on('ready',createWindow);
app.on('window-all-closed',() => {
    app.quit();
});

app.on('activate',() => {
    if(win == null){
        createWindow();
    }
});

作用如下：

第一行加载app ，以及BrowserWindow模块。
app模块是为了控制整个应用的声明周期而设计的，它可以监听很多的事件，做出相应的响应。
BrowserWindow模块可以创建一个窗体，目前我们需要这么多就行了。

然后声明了一个win变量，实际上我们可以把它看做窗体对象的引用。直到现在还没赋初始值。

let win;

紧接着我创建了一个窗体的配置JSON，内部指明了该窗体的大小（宽高）。

let windowConfig = {
    width:800,
    height:600
};

然后声明一个createWindow的函数用于创建窗体，在app模块被触发ready事件后执行。
内部为win变量进行赋值，它是一个BrowserWindow对象的实例。
win.loadURL用于加载一个html页面供显示，这里填入的是我上面创建的index.html。
当win被赋值为窗体对象后，对它的resize和close事件进行监听，意思是当窗体宽高大小发生变化后进行”重绘“，而close事件是监听窗体的关闭，当窗体被关闭时，令win = null，以便触发V8的GC机制时，回收掉BrowserWindow对象。

win = new BrowserWindow(windowConfig);
    win.loadURL(`file://${__dirname}/index.html`);
    //开启调试工具
    win.webContents.openDevTools();
    //全屏
    win.setFullScreen(true);
    globalShortcut.register('ESC', () => {
        win.setFullScreen(false);
    });
    //关闭
    win.on('close',() => {
        //回收BrowserWindow对象
        win = null;
    });
    win.on('resize',() => {
        win.reload();
    })

下面是app的事件监听
ready事件，当electron完成初始化时触发，并执行createWindow创建窗体。
window-all-closed ，当所有窗体都被关闭时触发，此时执行app.quit()用于结束整个应用。
activate ，当应用被激活时触发，此事件对于Mac用户很有用，比如DOCK上点击就相当于触发了activate事件，此时我们需要手动调用createWindow进行窗体创建。

app.on('ready',createWindow);
app.on('window-all-closed',() => {
    app.quit();
});

app.on('activate',() => {
    if(win == null){
        createWindow();
    }
})

PS：webstrom报错的话，在 设置-> 语言和构架-> JavaScript-> 设置为 ECMAScript6即可

5.webstrom运行程序：

视图 -> 工具窗口 -> Terminal （快捷键 alt+F12）

electron .  回车 即可

6.打包程序

命令行窗口进入到程序文件夹下，输入如下指令：

electron-packager . ProgramName --win --out ../ProgramApp --arch=x64 --version=1.0.0 --electron-version=1.7.9

对应的含义如下

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

至此，一个包含可执行的exe文件的程序就做好了

7.打包成一个可安装的 SetUp.exe 文件

需要用到NSIS来处理

（1）把程序生成一个 asar 文件，来代替 resources\app （程序源文件）

安装 asar

npm install -g asar

打包项目（在你的程序源文件下）

asar pack ./ app.asar

把生成的 app.asar 文件复制到已打包好的程序目录下的 resources 文件夹中，删除 app 源文件夹（为了打包成SetUp.exe时不出错误）

（2）使用NSIS进行打包

NSIS使用方法