前言

　　Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個執行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。

Electron於2013年作為構建Github上可程式設計的文字編輯器Atom的框架而被開發出來。這兩個專案在2014春季開源。

目前它已成為開源開發者、初創企業和老牌公司常用的開發工具。 看看誰在使用Electron 。

繼續往下閱讀可以瞭解Electron的貢獻者們和已經發布的版本，或者直接閱讀快速開始指引來開始用Electron來構建應用。

(摘抄至electronjs.org)

一、初始化專案

執行，vue init simulatedgreg/electron-vue 專案名稱

這裡的專案名稱是“admin” 

一路回車

 然後執行npm install來安裝依賴，執行方式和之前一樣。

如果遇到run dev或者run build的時候出錯，可能是因為國內的網路下載“electron-v1.8.3-win32-x64.zip”出錯，這時，你需要設定npm的代理：

如果需要使用者名稱密碼：

npm config set https-proxy http://使用者名稱:密碼@伺服器IP或域名:埠號

設定回原庫

也可以使用yarn。

安裝依賴、開發模式執行和程式設計的命令分別是：

專案構建完畢後，結構如下圖所示：

和之前專案區別是，main是用於桌面程式的程式碼，render是用於渲染的程式碼。我們只需要在render資料夾裡寫程式碼就可以。

開發模式執行：

二、程式碼編寫

入口檔案：

 main.js

其中 axios.defaults.baseURL = 'http://localhost:18080' 是設定後端專案URL，而這可以根據具體情況寫到配置檔案中，開發環境呼叫開發環境的配置，生產環境呼叫生產環境配置。

路由檔案：

 router/index.js

 主頁面：

 Main.vue

會員資料列表頁面：

 Member.vue

結構如下圖所示：

還有，在執行之前，我們需求修改src/main/index.js的配置：

function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      webSecurity: false
    }
  })

其目的是為了實現js跨域。

執行專案，效果如下：

二、生成安裝包

如提示缺少vue組建，是因為registry的問題，因為國內taobao映象沒有Electron的依賴環境。所以需要設定回預設的 registry，並使用設定proxy的方式下載依賴環境。

如果提示“icon source "build/icons/icon.ico" not found”

就把“icons”加到build目錄下，下載icons請點選連結，根據具體情況修改icons。

生成好後，出現“admin Setup 0.0.0.exe”的檔案，即安裝程式。

我運用這個安裝程式後，開啟剛剛開發好的程式，效果如圖所示：

發現，雖然只用到了一些前端技術，但已經能夠開發出桌面應用了。小時候，老師說：“學好數理化，走遍天下都不怕”。而現在是：“學會了node，任何平臺的前端都不怕”。

 返回目錄

程式碼下載地址 : https://github.com/carter659/electron-vue-example.git