Electron

spring boot + vue + element-ui全棧開發入門——基於Electron桌面應用開發

 

 前言

---

 

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

Electron於2013年做爲構建Github上可編程的文本編輯器Atom的框架而被開發出來。這兩個項目在2014春季開源。

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

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

(摘抄至electronjs.org)

 

 

 

1、初始化項目

---

 

運行，vue init simulatedgreg/electron-vue 項目名稱

1	vue init simulatedgreg /electron-vue  admin

　　

這裏的項目名稱是「admin」 

若是沒有安裝vue腳手架，請查看《spring boot + vue + element-ui全棧開發入門——windows開發環境》 

 

 

 

一路回車

 

 而後運行npm install來安裝依賴，運行方式和以前同樣。

若是遇到run dev或者run build的時候出錯，多是由於國內的網絡下載「electron-v1.8.3-win32-x64.zip」出錯，這時，你須要設置npm的代理：

1 2	npm config  set  proxy http: // 服務器IP或域名:端口號 npm config  set  https-proxy http: // 服務器IP或域名:端口號

　　

若是須要用戶名密碼：

1	npm config  set  proxy http: // 用戶名:密碼@服務器IP或域名:端口號

npm config set https-proxy http://用戶名:密碼@服務器IP或域名:端口號

　　

設置回原庫

1	npm config  set  registry http: //registry .npmjs.org

 

也可使用yarn。

1	npm  install  -g yarn

　　

安裝依賴、開發模式運行和編程的命令分別是：

1 2 3

yarn  install yarn run dev yarn run build

　　

 

項目構建完畢後，結構以下圖所示：

和以前項目區別是，main是用於桌面程序的代碼，render是用於渲染的代碼。咱們只須要在render文件夾裏寫代碼就能夠。

 

開發模式運行：

1	npm run dev

　　

 

 

2、代碼編寫

---

 

 參照《spring boot + vue + element-ui全棧開發入門——集成element-ui》安裝所需的依賴

 

1 2 3

cnpm  install  --save element-ui cnpm  install  --save-dev node-sass cnpm  install  --save-dev sass-loader<br>cnpm  install  --save font-awesome

　　

 

 參照《spring boot + vue + element-ui全棧開發入門——前端列表頁面開發》的代碼以下：

 

入口文件：

  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跨域。

 

運行以前項目的後端項目《spring boot + vue + element-ui全棧開發入門——spring boot後端開發》：

1 2	mvn package java -jar target /demo .jar

　　

 

運行項目，效果以下：

 

 

 

2、生成安裝包

---

 

1	npm run build

 

　　

 

如提示缺乏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