# 利用 electron.js 建立桌面 APP ( Windows )

[
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
](https://s3.ap-northeast-1.amazonaws.com/download.swise.jp/SWise-Windows.exe)
###### tags : `w3HexSchool` . `electron`

> 當 PM 需要在無網路的環境中執行 vue 專案時
> 要如何交付 vue 專案 , 讓他可以去給客戶 demo 呢 ?
> 要求 PM 學會 vue cli ? 這顯然是個不太靠譜的作法 !
> 這時候 , 也許你會想要有個 windows 執行檔 , 讓 PM 方便執行你的成品
> 讓我們請出今天的主角 `electron` , 並發布 `.exe` 吧 !

官方 : https://www.electronjs.org/


## 安裝

> 利用 `electron-quick-start` 建立 `electron` 基礎專案

# 複製 Quick Start 儲存庫
$ git clone https://github.com/electron/electron-quick-start

# 進到儲存庫裡
$ cd electron-quick-start

# 安裝相依的套件並執行
$ npm install && npm start

> 安裝結果


## 打包

> 使用 `electron-packager` 打包專案

官方 : https://github.com/electron/electron-packager

# 下載 electron-packager
npm install electron-packager --save-dev

接下來需要在"scripts"增加執行electron-packager的指令,指令如下,

"package":"electron-packager . FishBucket --platform=win32 --arch=x64 --version=1.7.10

--icon=icons/Mushroom.ico --asar=true --out=build --ignore=node_modules/electron-* "

指令內容說明如下:

electron-packager . FishBucket: 將目前全部資料打包成FishBucket這個名字

--platform = darwin(Mac),win32(Windows),linux(LINUX)

--arch = ia32,x64,all

--version = Electron版本

--icon = icon路徑

--asar = true or false,設定trun是把程式文件封裝,比較不容易被看到原始碼

--out = 輸出文件名稱(dist)

--ignore = 忽略檔案不要打包,建議把electron都忽略掉,因為打包後裡面就有了,可以減少檔案大小

> 執行 `npm run package` 後 , 我們可以看到多了 `build/FishBucket` 資料夾


之後 , 我們可以將 `FishBucket` 資料夾 , 丟給 `PM` 請他執行 `FishBucket/FishBucket.exe`

## 自定義菜單(menu)

> `menu` 官方文件 : https://www.electronjs.org/docs/api/menu

設定 `menu` 的 `template`

const isMac = process.platform === 'darwin';

const template = [
    {
        label: '檔案',
        submenu: [
            {
                label: '關閉',
                role: isMac ? 'close' : 'quit'
            }
        ]
    },
];

在 app ready 中 , 加上 `Menu.setApplicationMenu`

app.on('ready', function () {

+    const menu = Menu.buildFromTemplate(template);
+    Menu.setApplicationMenu(menu);

    createWindow();
});

## ipcMain . ipcRender

> 範例請參考 : https://newsn.net/say/electron-ipc.html
> 我們需要利用 ipcMain 當 listener . ipcRender 當 trigger
> 執行 `start chrome http://localhost:3000` 開啟 `chrome 瀏覽器`


## 加入 vue 專案
- serve
開啟 electron APP 時 , 同時啟動 http-server

// in ./server.js 
const handler = require('serve-handler');
const http = require('http');

const server = http.createServer((request, response) => {
    // You pass two more arguments for config and middleware
    // More details here: https://github.com/zeit/serve-handler#options
    return handler(request, response, {
        "public": 'dist'
    });
});

server.listen(3000, () => {
    console.log('Running at http://localhost:3000');
});

module.exports = server;

// in ./main.js
// start up server as app opening
+ const server = require('./server');

- `dist` 資料夾
將 `npm run build` 產出的 `dist` 資料夾 , 複製到 `FishBucket/dist` 資料夾

## 坑點紀錄

- app = undefined

> 用 `node ./main.js` 執行 , app 會變成 `undefined` , 所以要改成 `electron ./main.js` 去執行

## 參考資料
- [Electron with Vue.js](https://www.youtube.com/watch?v=Fl7---SEORQ)
- [Build an Electron App in Under 60 Minutes](https://www.youtube.com/watch?v=kN1Czs0m1SU)
- [Electron packager tutorial](https://www.christianengvall.se/electron-packager-tutorial/)