1. electron簡介
2. 工具介紹
3. 實(shí)踐效果抑月，步驟
1）一個(gè)簡單的 Electron 桌面應(yīng)用都是沖 Hello World移斩！ 開始的。
以上是使用 electron-vue 超級迅速制作出來的 electron 桌面應(yīng)用肌幽。
2）安裝的組件
vue init simulatedgreg/electron-vue white-electron-first
3）build tool choice 蛛株？
構(gòu)建工具的選擇，比較先進(jìn)的是electron-builder翰苫。
實(shí)際上調(diào)試止邮，開發(fā)可以直接選擇 electron-builder，它支持熱更新奏窑，像目前大部分在使用的 vue-cli 構(gòu)建出來的項(xiàng)目一樣保存即更新导披。
如果是簡單打包應(yīng)用就直接選擇 electron-packager 就好了，功能比較簡單埃唯。
4） 下一步
> npm i? // 裝包
> npm run dev? // 測試環(huán)境運(yùn)行
就可以有一個(gè)初步的Electron桌面應(yīng)用了撩匕。
4. 如何將網(wǎng)站只做成 ELectron 應(yīng)用？
1）網(wǎng)站頁面
to 桌面應(yīng)用
2）熟悉 node 的朋友都知道筑凫，啟動一個(gè) node 程序滑沧，通常就是?node app.js?之類的。
把這個(gè) Node 應(yīng)用轉(zhuǎn)換成一個(gè) Electron 應(yīng)用也是非常簡單的巍实，我們只不過是把?node?運(yùn)行時(shí)替換成了?electron運(yùn)行時(shí)滓技。package.json如下：
{
? ? "script": {
? ? ? ? "electron": "electron build/electron.js",
? ? }
}
Electron.js (一般啟動項(xiàng)目寫在main.js，具體看項(xiàng)目) 這個(gè)文件應(yīng)該怎樣寫呢棚潦，這種基本都是參考成熟項(xiàng)目的令漂，一般簡單的如：
// electron.js"
const {app, BrowserWindow} = require('electron')
? // 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
? function createWindow () {
? ? // 創(chuàng)建瀏覽器窗口。
? ? win = new BrowserWindow({width: 800, height: 600})
? ? // 然后加載應(yīng)用的 index.html丸边。
? ? win.loadFile('index.html')
? ? // 打開開發(fā)者工具
? ? win.webContents.openDevTools()
? ? // 當(dāng) window 被關(guān)閉叠必，這個(gè)事件會被觸發(fā)。
? ? win.on('closed', () => {
? ? ? // 取消引用 window 對象妹窖，如果你的應(yīng)用支持多窗口的話纬朝，
? ? ? // 通常會把多個(gè) window 對象存放在一個(gè)數(shù)組里面，
? ? ? // 與此同時(shí)骄呼，你應(yīng)該刪除相應(yīng)的元素共苛。
? ? ? win = null
? ? })
? }
? // Electron 會在初始化后并準(zhǔn)備
? // 創(chuàng)建瀏覽器窗口時(shí)，調(diào)用這個(gè)函數(shù)蜓萄。
? // 部分 API 在 ready 事件觸發(fā)后才能使用隅茎。
? app.on('ready', createWindow)
? // 當(dāng)全部窗口關(guān)閉時(shí)退出。
? app.on('window-all-closed', () => {
? ? // 在 macOS 上嫉沽，除非用戶用 Cmd + Q 確定地退出辟犀，
? ? // 否則絕大部分應(yīng)用及其菜單欄會保持激活。
? ? if (process.platform !== 'darwin') {
? ? ? app.quit()
? ? }
? })
? app.on('activate', () => {
? ? // 在macOS上绸硕，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時(shí)堂竟，
? ? // 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口魂毁。
? ? if (win === null) {
? ? ? createWindow()
? ? }
? })
? // 在這個(gè)文件中，你可以續(xù)寫應(yīng)用剩下主進(jìn)程代碼跃捣。
? // 也可以拆分成幾個(gè)文件舅列，然后用 require 導(dǎo)入韩脏。
上文代碼中有一段win.loadFile('index.html')的代碼，意味著你的入口頁面就是 index.html, 就像我們用electron-vue 模板啟動的 hello world 一樣奈附。
3）我們的 view 應(yīng)用實(shí)際上就是一個(gè) SPA 的頁面刁赦，打包出來后也會有這個(gè)入口index.html 文件娶聘。
于是?npm run build?先 build 出 dist 文件后，electron.js 的 index.html 替換成 dist 目錄下的 html 文件之后甚脉，出現(xiàn)以下問題：打包出來的 css丸升、js 文件訪問不到了。
應(yīng)該是應(yīng)用版本不同牺氨，我們項(xiàng)目用的 webpack 找不到以上配置狡耻，于是直接改了 index.html 里面的 css，js 引用路徑猴凹。
由于我們服務(wù)加載前必須先訪問登陸系統(tǒng)夷狰，前端項(xiàng)目在沒有配 ha 的情況下，單獨(dú)的運(yùn)行個(gè)靜態(tài)前端項(xiàng)目是不行的呢郊霎。
然而沼头，還是做到了。
實(shí)際也比較簡單：直接把這段代碼改成
// 然后加載應(yīng)用的 index.html书劝。
win.loadFile('index.html')
// to 本地服務(wù)的地址就好了
win.loadUrl('http://localhost:4000')
目前這是最簡單的打包一個(gè)已有應(yīng)用成 electron 應(yīng)該的方法进倍。
歡迎工作一到五年的Java工程師朋友們加入Java程序員開發(fā)： 854393687
群內(nèi)提供免費(fèi)的Java架構(gòu)學(xué)習(xí)資料（里面有高可用、高并發(fā)购对、高性能及分布式猾昆、Jvm性能調(diào)優(yōu)、Spring源碼骡苞，MyBatis垂蜗，Netty,Redis,Kafka,Mysql,Zookeeper,Tomcat,Docker,Dubbo,Nginx等多個(gè)知識點(diǎn)的架構(gòu)資料）合理利用自己每一分每一秒的時(shí)間來學(xué)習(xí)提升自己，不要再用"沒有時(shí)間“來掩飾自己思想上的懶惰烙如！趁年輕么抗，使勁拼，給未來的自己一個(gè)交代亚铁！
