1. electron簡(jiǎn)介
2. 工具介紹
3. 實(shí)踐效果，步驟
1）一個(gè)簡(jiǎn)單的 Electron 桌面應(yīng)用都是沖 Hello World！ 開始的。
以上是使用 electron-vue 超級(jí)迅速制作出來的 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)目一樣保存即更新。
如果是簡(jiǎn)單打包應(yīng)用就直接選擇 electron-packager 就好了，功能比較簡(jiǎn)單。
4） 下一步
> npm i? // 裝包
> npm run dev? // 測(cè)試環(huán)境運(yùn)行
就可以有一個(gè)初步的Electron桌面應(yīng)用了。
4. 如何將網(wǎng)站只做成 ELectron 應(yīng)用？
1）網(wǎng)站頁面
to 桌面應(yīng)用
2）熟悉 node 的朋友都知道，啟動(dòng)一個(gè) node 程序，通常就是?node app.js?之類的。
把這個(gè) Node 應(yīng)用轉(zhuǎn)換成一個(gè) Electron 應(yīng)用也是非常簡(jiǎn)單的，我們只不過是把?node?運(yùn)行時(shí)替換成了?electron運(yùn)行時(shí)。package.json如下：
{
? ? "script": {
? ? ? ? "electron": "electron build/electron.js",
? ? }
}
Electron.js (一般啟動(dòng)項(xiàng)目寫在main.js，具體看項(xiàng)目) 這個(gè)文件應(yīng)該怎樣寫呢，這種基本都是參考成熟項(xiàng)目的，一般簡(jiǎn)單的如：
// 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è)事件會(huì)被觸發(fā)。
? ? win.on('closed', () => {
? ? ? // 取消引用 window 對(duì)象，如果你的應(yīng)用支持多窗口的話，
? ? ? // 通常會(huì)把多個(gè) window 對(duì)象存放在一個(gè)數(shù)組里面，
? ? ? // 與此同時(shí)，你應(yīng)該刪除相應(yīng)的元素。
? ? ? win = null
? ? })
? }
? // Electron 會(huì)在初始化后并準(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)用及其菜單欄會(huì)保持激活。
? ? 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 模板啟動(dòng)的 hello world 一樣。
3）我們的 view 應(yīng)用實(shí)際上就是一個(gè) SPA 的頁面，打包出來后也會(huì)有這個(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í)際也比較簡(jiǎn)單：直接把這段代碼改成
// 然后加載應(yīng)用的 index.html。
win.loadFile('index.html')
// to 本地服務(wù)的地址就好了
win.loadUrl('http://localhost:4000')
目前這是最簡(jiǎn)單的打包一個(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è)知識(shí)點(diǎn)的架構(gòu)資料）合理利用自己每一分每一秒的時(shí)間來學(xué)習(xí)提升自己，不要再用"沒有時(shí)間“來掩飾自己思想上的懶惰！趁年輕，使勁拼，給未來的自己一個(gè)交代！
