安裝
在macOS上全局安裝electron
$ npm i -g electron --unsafe-perm=true --allow-root
部署quick-start
$ git clone https://github.com/electron/electron-quick-start
輔助工具
electron-forge
1.安裝electron-forge
$ npm install -g electron-forge
2.初始化項(xiàng)目
$ electron-forge init my-new-project --lintstyle=standard --template=react
3.啟動(dòng)項(xiàng)目
$ electron-forge start
4.打包項(xiàng)目
$ electron-forge package
electron-vue
# 安裝 vue-cli，使用腳手架樣板代碼初始化項(xiàng)目
$ npm install -g vue-cli
$vue init simulatedgreg/electron-vue my-project
主進(jìn)程與渲染進(jìn)程
electron的開(kāi)發(fā)主要涉及到兩個(gè)進(jìn)程的操作：Main主進(jìn)程瑟枫，Renderer渲染進(jìn)程靴跛。
主進(jìn)程主要通過(guò)nodejs限书、chromium征椒、native apis來(lái)實(shí)現(xiàn)一些系統(tǒng)或底層的操作庶骄，比如操作剪貼板等澳眷。
渲染進(jìn)程主要通過(guò)chromium來(lái)實(shí)現(xiàn)web界面习柠。
兩個(gè)進(jìn)程通過(guò)ipcMain和ipcRenderer來(lái)進(jìn)行通信
主進(jìn)程向渲染進(jìn)程發(fā)消息
main.js文件：
// 當(dāng)頁(yè)面加載完成時(shí)蒜焊，會(huì)觸發(fā)`did-finish-load`事件倒信。
win.webContents.on('did-finish-load', () => {
win.webContents.send('main-process-messages', 'webContents event "did-finish-load" called');
});
renderer.js文件
// 引入ipcRenderer對(duì)象
const electron = require('electron');
const ipcRenderer = electron.ipcRenderer;
// 設(shè)置監(jiān)聽(tīng)
ipcRenderer.on('main-process-messages', (event, message) => {
console.log('message from Main Process: ' , message); // Prints Main Process Message.
});
渲染進(jìn)程向主進(jìn)程發(fā)消息
renderer.js文件
// 引入ipcRenderer對(duì)象
const electron = require('electron');
const ipcRenderer = electron.ipcRenderer;
ipcRenderer.send('asynchronous-message', 'hello');
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log('asynchronous-reply: %O %O', event, arg);
});
main.js文件
ipcMain.on('asynchronous-message', (event, arg) => {
// 返回消息
event.sender.send('asynchronous-reply', 'ok');
});
