目錄結構與檔案
Electron App的目錄結構如下：
your-app/
├── package.json
├── main.js
└── index.html 你應用裡的 package.json 看起來應該像：
{ "name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注：當package.json裡不存在main時，Electron将會預設使用index.js
main.js是啟動你App的腳本，它将會開啟主程序，main.js應當建立一個視窗并處理系統事件。一個典型的例子如下：
// 控制應用生命周期的子產品
const {app} = electron;
// 建立本地浏覽器視窗的子產品
const {BrowserWindow} = electron;
// 指向視窗對象的一個全局引用，如果沒有這個引用，那麼當該javascript對象被垃圾回收的
// 時候該視窗将會自動關閉
let win;
function createWindow() {
// 建立一個新的浏覽器視窗
win = new BrowserWindow({width: 1920, height: 1080});
// 并且裝載應用的index.html頁面
win.loadURL(`file://${__dirname}/index.html`);
// 打開開發工具頁面
//win.webContents.openDevTools();
// 當視窗關閉時調用的方法
win.on('closed', () => {
// 解除視窗對象的引用，通常而言如果應用支援多個視窗的話，你會在一個數組裡
// 存放視窗對象，在視窗關閉的時候應當删除相應的元素。
win = null;
});
}
// 當Electron完成初始化并且已經建立了浏覽器視窗，則該方法将會被調用。
// 有些API隻能在該事件發生後才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 當所有的視窗被關閉後退出應用
app.on('window-all-closed', () => {
// 對于OS X系統，應用和相應的菜單欄會一直激活直到使用者通過Cmd + Q顯式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 對于OS X系統，當dock圖示被點選後會重新建立一個app視窗，并且不會有其他
// 視窗打開
if (win === null) {
createWindow();
}
});
最後，index.html是你最終要展示的頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
electron打包釋出
全局安裝electron
npm install electron -g
在cmd 直接輸入 electron 直接啟electron
就會出現如下圖的界面
預覽應用，就是把app那個檔案直接拖入到打開的 electron裡面就可以檢視效果了 釋出成exe的問題
使用指令 npm install --save-dev electron-packager将electron-package安裝到項目的路徑下面
安裝完成後，package.json中會多出一條electron-package的版本号配置資訊
"devDependencies": {
"electron-packager": "^6.0.0",
"electron-prebuilt": "^0.37.3",
"gulp": "^3.9.1"
}
ele ctron-packager的打包基本指令是： 指令說明：
* location of project：項目所在路徑
* name of project：打包的項目名字
* platform：确定了你要建構哪個平台的應用（Windows、Mac 還是 Linux）
* architecture：決定了使用 x86 還是 x64 還是兩個架構都用
* electron version：electron 的版本
* optional options：可選選項
指令比較長，每次要是都用這個指令來打包會很煩，可以使用第二種方法；
首先在項目根目錄下面的 package.json 裡添加代碼，
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=
./app/img/icon/icon.ico"
PS：這裡要注意，字段裡的 項目名字，version，icon路徑要改成自己的；
具體添加位置如圖，
然後，在使用指令 npm run-script packager
最後，打包完成之後如圖
運作對應包下的.exe檔案，就可以看到我們的應用了。
還有就是為了避免源代碼直接暴露給使用者，我們還需要做的就是用asar把./resources下面的app檔案打包成一個asar的檔案
然後直接把app檔案删除，把打包好的app.asar直接./resources下面，在運作appName.exe就好了
注意，asar的檔案名一定得是app
asar pack your-app app.asar
例如：asar pack F:\atom_project\myatom_1 F:\atom_project\app.asar
這樣就會把myatom_1打包成app.asar 再給大家推薦一個使用nsis制作安裝程式的部落格:http://www.cnblogs.com/modou/p/3573772.html