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打包，簡單方便
打包之后，運行：
完美！
總結
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
學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。
個人公眾號：