1. electron簡介
2. 工具介紹
3. 實踐效果，步驟
1）一個簡單的 Electron 桌面應用都是衝 Hello World！ 開始的。
以上是使用 electron-vue 超級迅速製作出來的 electron 桌面應用。
2）安裝的組件
vue init simulatedgreg/electron-vue white-electron-first
3）build tool choice ？
構建工具的選擇，比較先進的是electron-builder。
實際上調試，開發可以直接選擇 electron-builder，它支持熱更新，像目前大部分在使用的 vue-cli 構建出來的項目一樣保存即更新。
如果是簡單打包應用就直接選擇 electron-packager 就好了，功能比較簡單。
4） 下一步
> npm i // 裝包
> npm run dev // 測試環境運行
就可以有一個初步的Electron桌面應用了。
4. 如何將網站只做成 ELectron 應用？
1）網站頁面
to 桌面應用
2）熟悉 node 的朋友都知道，啟動一個 node 程序，通常就是 node app.js 之類的。
把這個 Node 應用轉換成一個 Electron 應用也是非常簡單的，我們只不過是把 node 運行時替換成了 electron運行時。package.json如下：
{
"script": {
"electron": "electron build/electron.js",
}
}
Electron.js (一般啟動項目寫在main.js，具體看項目) 這個文件應該怎樣寫呢，這種基本都是參考成熟項目的，一般簡單的如：
// 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 () {
// 創建瀏覽器窗口。
win = new BrowserWindow({width: 800, height: 600})
// 然後加載應用的 index.html。
win.loadFile('index.html')
// 打開開發者工具
win.webContents.openDevTools()
// 當 window 被關閉，這個事件會被觸發。
win.on('closed', () => {
// 取消引用 window 對象，如果你的應用支持多窗口的話，
// 通常會把多個 window 對象存放在一個數組裡面，
// 與此同時，你應該刪除相應的元素。
win = null
})
}
// Electron 會在初始化後並準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)
// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其菜單欄會保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
// 通常在應用程序中重新創建一個窗口。
if (win === null) {
createWindow()
}
})
// 在這個文件中，你可以續寫應用剩下主進程代碼。
// 也可以拆分成幾個文件，然後用 require 導入。
上文代碼中有一段win.loadFile('index.html')的代碼，意味著你的入口頁面就是 index.html, 就像我們用electron-vue 模板啟動的 hello world 一樣。
3）我們的 view 應用實際上就是一個 SPA 的頁面，打包出來後也會有這個入口index.html 文件。
於是 npm run build 先 build 出 dist 文件後，electron.js 的 index.html 替換成 dist 目錄下的 html 文件之後，出現以下問題：打包出來的 css、js 文件訪問不到了。
應該是應用版本不同，我們項目用的 webpack 找不到以上配置，於是直接改了 index.html 裡面的 css，js 引用路徑。
由於我們服務加載前必須先訪問登陸系統，前端項目在沒有配 ha 的情況下，單獨的運行個靜態前端項目是不行的呢。
然而，還是做到了。
實際也比較簡單：直接把這段代碼改成
// 然後加載應用的 index.html。
win.loadFile('index.html')
// to 本地服務的地址就好了
win.loadUrl('http://localhost:4000')
目前這是最簡單的打包一個已有應用成 electron 應該的方法。
歡迎工作一到五年的Java工程師朋友們加入Java程序員開發： 854393687
群內提供免費的Java架構學習資料（裡面有高可用、高併發、高性能及分佈式、Jvm性能調優、Spring源碼，MyBatis，Netty,Redis,Kafka,Mysql,Zookeeper,Tomcat,Docker,Dubbo,Nginx等多個知識點的架構資料）合理利用自己每一分每一秒的時間來學習提升自己，不要再用"沒有時間“來掩飾自己思想上的懶惰！趁年輕，使勁拼，給未來的自己一個交代！
閱讀更多 JAVA柯尼塞克丶 的文章
