再此之前你需要安装node 官方下载：https://nodejs.org/en/download/ 安装好之后在命令行中输入 node -v 可查看到node的版本号即可
1.创建一个空文件夹,在该文件夹中运行
npm init运行后需要输入项目名称版本描述各种,一切默认即可,完成后会在文件夹中生成 package.json 文件,这里稍加修改
{ "name": "helloelectron", "version": "1.0.0", "description": "", "main": "main.js", //mian字段对应主程序入口,默认是index.js这里我将它修改成了mian.js "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." //添加启动命令 }, "author": "", "license": "ISC" }2.安装ELectron 运行以下命令
npm install --save-dev electron最基本的 Electron 应用一般来说会有如下的目录结构： 所以我们要新建main.js和index.html
your-app/ ├── package.json ├── main.js └── index.html3.新建 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 导入。4.新建 index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>5.启动Electron
npm start一个最基本的demo已经完成
1.安装打包工具
npm install electron-packager -g2.配置打包命令 在package.json 的 scripts 中添加
{ "name": "helloelectron", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron .", "pack": "electron-packager . myClient --win --out ./myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //添加这句打包命令 }, "author": "", "license": "ISC", "devDependencies": { "electron": "^5.0.1" } }"." 需要打包的应用目录（即当前目录）
"myClient" 应用名称
"--win" 打包平台（以Windows为例）
"--out ./myClient" 输出目录
"--arch=64" 64位
"--app-version=0.0.1" 应用版本
"--electron-version=2.0.0" electron版本
3.运行打包命令
npm run pack我们已经得到了应用程序的绿色版本(无需安装，拷贝整个文件目录之后即可使用),进到输出目录,双击myClient.exe就可以打开应用程序了
