1.初始化node項目，生成package.json文件
npm init
2.安裝electron，並保存為開發依賴項
npm install electron -D
3.根目錄下新建index.js文件
const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadFile('index.html')
// mainWindow.webContents.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
4.根目錄下新建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> <h1>Hello Electron!!</h1> </body> </html>
5.打開package.json文件，新建命令
"scripts": { "start": "electron ." }
6.執行啟動命令
npm start
目前為止，一個最糙的demo就完成了，但這樣是遠遠不夠的，作為一個桌面應用程序，我們希望點擊exe文件就能直接啟動應用，而不是打開命令行，輸入啟動命令。這一步就需要打包工具來完成了。
7.安裝electron打包工具electron-packager
npm install electron-packager -g
8.配置打包命令
"scripts": { "start": "electron .", "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" }
命令結構如下（根據實際情況修改）：
“.”：需要打包的應用目錄（即當前目錄），
“myClient”：應用名稱，
“--win”：打包平台（以Windows為例），
“--out ../myClient”：輸出目錄，
“--arch=64”：64位，
“--app-version=0.0.1”：應用版本，
“--electron-version=2.0.0”：electron版本
執行打包命令：
npm run pack
打包完成后，找到輸出目錄，打開打包完成后的文件夾，
可以看到生成了.exe的執行文件以及其他的一堆配置文件，雙擊myClient.exe就可以打開應用程序了。
現在，我們已經得到了應用程序的綠色版本（無需安裝，拷貝整個文件目錄之后即可使用），但是作為客戶端應用程序，我們更希望能直接得到一個安裝包，安裝之后通過桌面快捷方式的形式去訪問，這時候就需要Inno Setup出場了。
9.下載安裝Inno Setup
下載地址：https://pc.qq.com/detail/13/detail_1313.html
安裝完成以后打開Inno Setup客戶端
a. file->new，新建腳本
b.填寫應用程序信息，黑體為必填項
Application name： 應用名稱；
Application version：應用版本；
Application publisher：發行單位（可選）；
Application websiter：應用程序網址（可選）；
c.完善應用文件信息
Application destination base folder：應用程序目標基本文件夾，可默認也可自定義；
Application folder name：應用文件夾名稱；
Allow user to change the application folder：勾選，允許用戶自定義安裝位置；
d.指定屬於應用程序的文件
Application main executable file：應用程序主執行文件，即第8步中打包生成的.exe文件；
Allow user to start the application after Setup has finished：允許用戶在安裝完成后啟動應用程序；
Add folders：添加應用程序文件，選擇第8步中打包出的文件根目錄即可，要把所有.dll文件及其他配置文件都包含進去；
點擊添加之后可以看到：
文件目錄以自己的實際情況為准。
e.指定應用程序的快捷方式，勾選默認的兩項即可，即“創建主執行程序的快捷方式到公共開始菜單程序文件夾”、“允許用戶創建桌面快捷方式”
f.指定安裝期間要顯示的文檔文件
License file：許可文件；
Information file shown before installation：安裝之前顯示信息文件；
Information file shown after installation：安裝之后顯示信息文件；
g.指定應包括的安裝語言（漢化版的有簡體中文選項），選擇之后點擊下一步
h.指定基本編譯設置
Custom compiler output folder：自定義編譯器輸出文件夾，即最終編譯出的安裝包要放哪個位置；
Compiler output base file name：編輯器輸出基本文件名，即安裝包名稱；
Custom Setup icon file：自定義安裝程序圖標文件；
Setup password：安裝密碼；
i.點擊下一步
剩下的就是一路確定了，會詢問你在編譯之前要不要保存你的腳本（上面的配置步驟，最終會生成一個編譯腳本文件），點擊保存，先不要編譯，打開腳本文件，新增配置項，修改注冊表，設置開機自啟動：
[Registry] Root: HKLM; Subkey: "SOFTWARE\Microsoft\Windows\CurrentVersion\Run"; ValueType: string; ValueName: "testrun"; ValueData: "{app}\{#MyAppExeName}"
然后，執行編譯文件：build->compile
至此，所有步驟已經完成了，趕快去看看你的安裝包能不能正常使用吧。