安裝使用electron辛路歷程
成功安裝electron以及成功使用第一個應用，整整花費了我一整天的時間，各種百度，各種嘗試。最終，終於總結了一個親測可行的終極可執行方案：
electron 簡單介紹：
實現：HTML/CSS/JS桌面程序，搭建跨平台桌面應用。
electron 官方文檔：
使用步驟：
- 下載並安裝node.js
- 檢查node.js和npm是否安裝成功
- 下載electron【這里需要注意：如果在線安裝不行的話，直接離線下載安裝】
- 安裝electron或直接使用
- 編寫第一個應用——基於electron的二次開發
-
下載並安裝node.js
從node.js官網 https://nodejs.org/en/ 下載>=4.x版本的node.js，並修改環境變量PATH。新手請自行百度：node.js安裝。
-
檢查node.js和npm是否可以安裝成功
在cmd命令行執行：
node -v
npm -v
若不報錯，則安裝成功。
-
下載electron
參考官網安裝指南：https://electronjs.org/docs/tutorial/installation
- npm在線安裝：
cmd命令行下執行：
- npm install electron -g【加g是全局安裝，自動添加到環境變量中】
- 檢查是否安裝成功：輸入electron回車，出現一個類似瀏覽器的工具，直接拖進去一個網頁即可
- cd 你的項目路徑
- electron .\
即可。
這時候，你可能會遇到各種報錯，以下是我嘗試過的各種解決辦法，如下參考：
- 使用淘寶鏡像 npm install -g electron --registry=https://registry.npm.taobao.org
- 先安裝cnpm，再使用cnpm安裝electron
但是！！！
……對我來說上面這些解決辦法都沒有用，最后直接使用：官網下載electron.zip
- 離線安裝：
【下載適合自己平台等的壓縮包文件】
-
安裝或者直接使用
- 如果上面的在線安裝沒有出現錯誤提示，那么可以直接使用
在cmd命令行直接 electron .\(你編寫的應用的那個文件夾下執行)。
- 離線安裝的：
進入你安裝的離線包的目錄下，找到electron.exe，然后cmd窗口執行：electron.exe 你項目的路徑，即可。
- 參考鏈接：
- https://jingyan.baidu.com/album/9225544671aecf851648f484.html?picindex=2
- https://www.cnblogs.com/zhangym/p/6113534.html
- 編寫第一個應用——基於electron的二次開發
- 怎么做？
- （如果網絡正常，且沒有限制）
- 克隆electron快速開始的源： git clone https://github.com/electron/electron-quick-start
- 進入到electron快速開始的文件夾： cd electron-quick-start
- 安裝依賴 ：npm install
- 運行APP：npm start
- 在此基礎上可以進行二次開發
2. （如果網絡有限制或者不能正常下載的）
- 增加淘寶源npm install --registry https://registry.npm.taobao.org
- 下載下來項目后，npm i后會下載npm的相關依賴，electron下載不下來的，可以去官網 https://npm.taobao.org/mirrors/electron 下載相應的壓縮包，解壓后放在目錄 xxx\electron-quick-start\node_modules\electron\dist 目錄下，然后執行npm i —> npm start即可 。這是花費整整一天總結下來的經驗，經過無數次的嘗試，啊啊啊，絕對有效!!!
- electron與vue聯調
1. 打包
將vue編寫好的代碼，使用npm命令進行打包，替換掉electron里面的index.html文件。
2. 直接在vue項目中修改
使用electron-vue框架，將electron與vue進行融合，直接使用
3. 同時開兩個服務
對於vue項目，直接使用命令：npm run dev開啟服務后，修改electron項目中的main.js文件中的加載app的路徑，然后在electron項目中國，執行electron .，開啟第二個服務：
1 // and load the index.html of the app. 2 mainWindow.loadURL('http://xxx.xxx.xxx.xx:3101/#');
編寫第一個應用：
- electron應用的目錄結構大體上分為三個文件：package.json main.js index.html。
- package.json文件：主要用來描述我們的electron項目的一些信息；
- index.html文件：也就是我們的網頁文件，即要用來打包為桌面應用的文件；
- main.js文件：用於創建窗口，把網頁ui放到窗口里面，同時處理系統時間。
- package.json 文件：
name：項目名稱；vision：項目版本；main：表示我們的應用的啟動腳本，它運行在主進程上
1 { 2 "name" : "electron-app", 3 "version" : "0.1.0", 4 "main" : "main.js" 5 }
- main.js 文件：
1 var electron = require('electron'); 2 var app = electron.app; 3 4 var BrowserWindow = electron.BrowserWindow; // 創建原生瀏覽器窗口的模塊 5 6 // 保持一個對於 window 對象的全局引用，不然，當 JavaScript 被 GC， 7 // window 會被自動地關閉 8 var mainWindow = null; 9 10 // 當所有窗口被關閉了，退出。 11 app.on('window-all-closed', function() { 12 // 在 OS X 上，通常用戶在明確地按下 Cmd + Q 之前 13 // 應用會保持活動狀態 14 if (process.platform != 'darwin') { 15 app.quit(); 16 } 17 }); 18 19 // 當 Electron 完成了初始化並且准備創建瀏覽器窗口的時候 20 // 這個方法就被調用 21 app.on('ready', function() { 22 // 創建瀏覽器窗口。 23 mainWindow = new BrowserWindow({width: 800, height: 600}); 24 25 // 加載應用的 index.html 26 mainWindow.loadURL('file://' + __dirname + '/index.html'); 27 28 // 打開開發工具 29 mainWindow.openDevTools(); 30 31 // 當 window 被關閉，這個事件會被發出 32 mainWindow.on('closed', function() { 33 // 取消引用 window 對象，如果你的應用支持多窗口的話， 34 // 通常會把多個 window 對象存放在一個數組里面， 35 // 但這次不是。 36 mainWindow = null; 37 }); 38 });
- index.html文件：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello World!</title> 5 </head> 6 <body> 7 <h1>Hello World!</h1> 8 We are using io.js <script>document.write(process.version)</script> 9 and Electron <script>document.write(process.versions['electron'])</script>. 10 </body> 11 </html>
- 執行命令：
E:\electron\electron-v3.0.8-win32-x64>electron.exe F:\Projects2\electron_app