用 Vue 創建一個簡單的 electron 桌面應用

1. electron簡介

2. 工具介紹

3. 實踐效果，步驟

1）一個簡單的 Electron 桌面應用都是衝 Hello World！ 開始的。

以上是使用 electron-vue 超級迅速製做出來的 electron 桌面應用。

2）安裝的組件

vue init simulatedgreg/electron-vue white-electron-first
複製代碼

3）build tool choice ？

構建工具的選擇，比較先進的是electron-builder。

實際上調試，開發能夠直接選擇 electron-builder，它支持熱更新，像目前大部分在使用的 vue-cli 構建出來的項目同樣保存即更新。

若是是簡單打包應用就直接選擇 electron-packager 就行了，功能比較簡單。

4） 下一步

> npm i  // 裝包
> npm run dev  // 測試環境運行
複製代碼

就能夠有一個初步的Electron桌面應用了。

4. 如何將網站只作成 ELectron 應用？

1）網站頁面

to 桌面應用

2）熟悉 node 的朋友都知道，啓動一個 node 程序，一般就是 node app.js 之類的。

把這個 Node 應用轉換成一個 Electron 應用也是很是簡單的，咱們只不過是把 node 運行時替換成了 electron運行時。package.json以下：

{
    "script": {
        "electron": "electron build/electron.js",
    }
}
複製代碼

Electron.js (通常啓動項目寫在main.js，具體看項目) 這個文件應該怎樣寫呢，這種基本都是參考成熟項目的，通常簡單的如：

// electron.js" const {app, BrowserWindow} = require('electron') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow () { // 建立瀏覽器窗口。 win = new BrowserWindow({width: 800, height: 600}) // 而後加載應用的 index.html。 win.loadFile('index.html') // 打開開發者工具 win.webContents.openDevTools() // 當 window 被關閉，這個事件會被觸發。 win.on('closed', () => { // 取消引用 window 對象，若是你的應用支持多窗口的話， // 一般會把多個 window 對象存放在一個數組裏面， // 與此同時，你應該刪除相應的元素。 win = null }) } // Electron 會在初始化後並準備 // 建立瀏覽器窗口時，調用這個函數。 // 部分 API 在 ready 事件觸發後才能使用。 app.on('ready', createWindow) // 當所有窗口關閉時退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出， // 不然絕大部分應用及其菜單欄會保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上，當單擊dock圖標而且沒有其餘窗口打開時， // 一般在應用程序中從新建立一個窗口。 if (win === null) { createWindow() } }) // 在這個文件中，你能夠續寫應用剩下主進程代碼。 // 也能夠拆分紅幾個文件，而後用 require 導入。 上文代碼中有一段win.loadFile('index.html')的代碼，意味着你的入口頁面就是 index.html, 就像咱們用electron-vue 模板啓動的 hello world 同樣。

3）咱們的 view 應用實際上就是一個 SPA 的頁面，打包出來後也會有這個入口index.html 文件。

因而 npm run build 先 build 出 dist 文件後，electron.js 的 index.html 替換成 dist 目錄下的 html 文件以後，出現如下問題：打包出來的 css、js 文件訪問不到了。

應該是應用版本不一樣，咱們項目用的 webpack 找不到以上配置，因而直接改了 index.html 裏面的 css，js 引用路徑。

因爲咱們服務加載前必須先訪問登錄系統，前端項目在沒有配 ha 的狀況下，單獨的運行個靜態前端項目是不行的呢。

然而，仍是作到了。

實際也比較簡單：直接把這段代碼改爲

// 而後加載應用的 index.html。
win.loadFile('index.html')
// to 本地服務的地址就行了
win.loadUrl('http://localhost:4000')
複製代碼

目前這是最簡單的打包一個已有應用成 electron 應該的方法。

歡迎工做一到五年的Java工程師朋友們加入Java程序員開發： 854393687

羣內提供免費的Java架構學習資料（裏面有高可用、高併發、高性能及分佈式、Jvm性能調優、Spring源碼，MyBatis，Netty,Redis,Kafka,Mysql,Zookeeper,Tomcat,Docker,Dubbo,Nginx等多個知識點的架構資料）合理利用本身每一分每一秒的時間來學習提高本身，不要再用"沒有時間「來掩飾本身思想上的懶惰！趁年輕，使勁拼，給將來的本身一個交代！