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等多個知識點的架構資料）合理利用自己每一分每一秒的時間來學習提升自己，不要再用"沒有時間“來掩飾自己思想上的懶惰！趁年輕，使勁拼，給未來的自己一個交代！