安裝使用electron辛路歷程

時間 2019-11-12

標籤安裝使用 electron 歷程简体版

原文原文鏈接

安裝使用electron辛路歷程

成功安裝electron以及成功使用第一個應用，整整花費了我一成天的時間，各類百度，各類嘗試。最終，終於總結了一個親測可行的終極可執行方案：
html

electron 簡單介紹：

　　實現：HTML/CSS/JS桌面程序，搭建跨平臺桌面應用。vue

electron 官方文檔：

https://electronjs.org/docsnode

使用步驟：

下載並安裝node.js
檢查node.js和npm是否安裝成功
下載electron【這裏須要注意：若是在線安裝不行的話，直接離線下載安裝】
安裝electron或直接使用
編寫第一個應用——基於electron的二次開發

下載並安裝node.js

　　從node.js官網 https://nodejs.org/en/ 下載>=4.x版本的node.js，並修改環境變量PATH。新手請自行百度：node.js安裝。git

檢查node.js和npm是否能夠安裝成功

　　在cmd命令行執行：github

　　node -v
　　npm -vnpm

　　若不報錯，則安裝成功。json

下載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　　

離線安裝：

【下載適合本身平臺等的壓縮包文件】

淘寶鏡像：https://npm.taobao.org/mirrors/electron/
GitHub：https://github.com/electron/electron/releases

安裝或者直接使用

若是上面的在線安裝沒有出現錯誤提示，那麼能夠直接使用

在cmd命令行直接 electron .\(你編寫的應用的那個文件夾下執行)。

離線安裝的：

進入你安裝的離線包的目錄下，找到electron.exe，而後cmd窗口執行：electron.exe 你項目的路徑，便可。

參考連接：

編寫第一個應用——基於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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

安裝使用electron辛路歷程