什么是 Electron？
Electron 官網只有一句簡單的話： 使用 JavaScript，HTML 和 CSS 構建跨平台的桌面應用程序。簡單點講，就是有了 Electron，我們就可以用前端技術來寫 web 頁面，它可以轉化為一個桌面應用。
除此之前，Electron 還有其他的一些特性：
-
基於 Chromium 和 Node.js
-
兼容 Mac、Windows 和 Linux，可以構建出三個平台的應用程序
Electron 快速上手
先來一個helloword
初始化工程
創建 Electron 工程方式與前端項目別無二致，創建一個目錄，然后用 npm 初始化：
mkdir hello-electron && cd hello-electron
npm init -y
安裝依賴
npm install --save-dev electron
可能下載會報錯，我是使用了cnpm
創建 HTML
在 Electron 中，每個窗口都可以加載本地或者遠程 URL，這里我們先創建一個本地的 HTML 文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
創建入口文件
類似於 Node.js 啟動服務，Electron 啟動也需要一個入口文件，這里我們創建 index.js 文件。在這個入口文件里，需要去加載上面創建的 HTML 文件，那么如何加載呢？ Electron 提供了兩個模塊：
-
app模塊，它控制應用程序的事件生命周期。 -
BrowserWindow模塊，它創建和管理應用程序 窗口。
入口文件是 Node.js 環境，所以可以通過 CommonJS 模塊規范來導入 Electron 的模塊。同時添加一個 createWindow() 方法來將 index.html 加載進一個新的 BrowserWindow 實例。
// index.js const { app, BrowserWindow } = require('electron'); function createWindow () { const win = new BrowserWindow({ width: 800, height: 600 }) win.loadFile('index.html') }
// index.js
app.whenReady().then(() => {
createWindow()
})這樣一來就可以通過以下命令打開 Electron 應用程序了！
# 這里會自動去找package.json的main字段對應的文件運行
# 當然 你也可以將命令放進 script 里面
npx electron .
# 注意：后面有一個.要加上
到這里簡單的demo就結束了，要看更細化的內容看這個地址：https://mp.weixin.qq.com/s/GlDC-qff5bkOS1UMDEiF8A
------------我是分割線--------------
接下來做vue+electron的例子
1.首先來創建vue項目
這里用的是vue-cli3，如果是低版本請自行升級。
vue create electron-vue-demo
2.自動安裝electron
進入到項目根目錄，執行：
vue add electron-builder
注意：這里我的node版本低，要升級下node版本。（用的mac）window自行查找資料
// 清除node的cache（清除node的緩存） sudo npm cache clean -f // 安裝"n"版本管理工具，管理node（沒有錯，就是n） sudo npm install -g n // 更新node版本 sudo n stable // 再查一遍本機當前Node node -v
然后再次執行一次 vue add electron-builder，ok完事！
3.新建src/background.js
在剛剛創建的vue項目src目錄下新建background.js，復制以下代碼：
'use strict' import { app, protocol, BrowserWindow } from 'electron' import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib' const isDevelopment = process.env.NODE_ENV !== 'production' // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]) function createWindow () { // Create the browser window. win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('app://./index.html') } win.on('closed', () => { win = null }) } // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS 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 (win === null) { createWindow() } }) // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installVueDevtools() } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', data => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } }
以上代碼是1.5小節使用自動化方式安裝后生成的。
4.安裝依賴包
在項目根目錄執行，安裝全部依賴包
cnpm install
5.編譯並啟動APP
執行以下命令，開始編譯APP，並啟動開發環境APP：
npm run electron:serve
編譯成功后，就會出現開發環境的客戶端了。
6. build最終產品
這里我們已經集成了electron-builder工具，官方文檔可以參閱：https://www.electron.build/
7.設置APP及安裝包圖標和設置app名稱
修改vue.config.js
chainWebpack: config => {...}, + pluginOptions: { + electronBuilder: { + builderOptions: { + win: { + icon: './public/app.ico' + }, + mac: { + icon: './public/app.png' + }, + productName: 'AppDemo' // 設置名稱 + } + } + }
8.打包APP
執行以下命令，可以build工程：
npm run electron:build
最終在dist_electron目錄下生成build后的產品。
好了，到這里本文就結束了，后面還會更新electron的相關文章，多學習一些新知識，充實起來，加油！本博客只為記錄學習，希望大家共同成長。
同樣，有好的知識或者新技術可以共同探討！
更多細節也可以參考這篇文章：https://zhuanlan.zhihu.com/p/75764907