electron是什麼？
官網解釋爲：使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程序。可以看出，這個東西是爲了讓我們用html,javaScript,css開發的web應用和h5應用打包成一個桌面應用，比如說一個exe的安裝包，或者一個mac的安裝包。這樣我們可以不用在瀏覽器打開我們的應用了。而且像騰訊qq一樣直接運行。
大名鼎鼎的：VS code, facebook manager就是用這個神器開發打包的。
其他介紹
Web 技術
Electron 基於 Chromium 和 Node.js, 讓你可以使用 HTML, CSS 和 JavaScript 構建應用。
開源
Electron 是一個由 GitHub 及衆多貢獻者組成的活躍社區共同維護的開源項目。
跨平臺
Electron 兼容 Mac、Windows 和 Linux，可以構建出三個平臺的應用程序。
如何安裝
安裝electron很簡單，就像其他包一樣，直接npm或者yarn安裝：
npm i -D electron@latest
開發與打包H5應用
我們先安裝官方提供的實例：
# 克隆示例項目的倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進入這個倉庫
$ cd electron-quick-start
# 安裝依賴並運行
$ yarn install && yarn start
啓動後，就發現啓動了一個桌面應用：
打包該應用,執行下面的命令：
npm install electron-packager --save-dev
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
命令說明：
-
location of project：項目所在路徑
-
name of project：打包的項目名字
-
platform：確定了你要構建哪個平臺的應用（Windows、Mac 還是 Linux，可選值爲：darwin,linux,mas,win32）
-
architecture：決定了使用 x86 還是 x64 還是兩個都用
-
electron version：electron 的版本
-
optional options：可選選項
我們根據自己的項目環境，把下面的命令添加到package.json的script節點下：
"packager": "electron-packager ./ fristProject --platform=win32 --arch=ia32 --out ./outApp --electron-version 1.4.0 --overwrite"
第一次打包比較慢，因爲要下載編譯文件，最好用yarn來執行yarn packager來打包。打包完成後，我們就得到了一個exe的執行文件。
這樣我們就得到了一個h5開發的桌面應用了。下面我們介紹用electron-vue來開發和打包我們的聊天室程序。
electron-vue
安裝
依次執行以下命令：
npm install -g vue-cli
vue init simulatedgreg/electron-vue ws-chat
按照上面的操作完成之後，yarn dev就能啓動我們的開發環境了。
由於目錄結構稍微有變化，我們可以將之前vue-cli的src目錄裏面的代碼拷貝到/src/renderer。然後將以前項目依賴的npm也合併到現在的package.json裏面，main.js也需要合併一下。就完成一個vue-cli項目向electron-vue項目遷移的工作了。
接下來我們打包我們的程序：
yarn build
打包過程如果沒反應或者出錯，可以參考這篇文章：
electron-vue打包，使用electron-builder打包，簡單方便
打包之後，運行：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BpAy43jU-1591099351337)(https://b3logfile.com/file/2020/06/7-3f1a4d47.pnghttps://img.hacpai.com/file/2020/05/qrcode8-e83cb652.jpg)]
完美！
總結
electron能將你的網頁程序，打包成跨平臺的桌面程序- 開發上，
electron同時具備了網頁瀏覽器的能力，也具有nodeJs的能力，可以說是將網頁和nodeJs結合起來了，使得讀寫文件，訪問數據庫都能輕鬆實現，功能強大。 electron-vue能輕鬆將vue-cli腳手架搭建的項目進行遷移。electron在使用過程中還是有很多坑的，特別是打包的時候，大家需要仔細參考官方文檔。
個人感覺，學會了前端，就會了移動端app(react-native，流應用, web view混合應用)，h5應用，web應用，各種小程序，nodeJs後臺服務，跨平臺桌面應用，甚至使用cocos creater開發遊戲，微信小遊戲排名靠前的大部分是用該平臺開發的，使用的技術是javaScript配合canvas來實現的。所謂是無所不能。
相關閱讀：
一文看懂websocket
websocket實現一個聊天室
參考文獻：
官方網站
# Electron 快速入門及打包
# electron打包出現 Error: Unresolved node modules: vue
學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。
個人公衆號：
