Electron是一個可以使用 JavaScript，HTML 和 CSS 構建跨平臺桌面應用程式的開源框架。

本文主要分享一下采用vue + electron開發桌面程式的搭建過程。

1. 環境準備

這裡採用的是vue-cli3.x，可以通過下面的指令檢視當前vue-cli的版本：

vue --version# 3.9.3 這裡我用的是3.9.3

如果沒有裝vue-cli可以通過下面的命令安裝：

npm install -g @vue/cli

如果是vue-cli還是2.x可以先解除安裝2.x然後裝3.x

npm uninstall vue-cli -g

npm install -g @vue/cli

2. 建立專案

這裡採用vue-cli建立vue專案。

vue create electron-helloworld

引入vue-cli-plugin-electron-builder

cd electron-helloworld

vue add electron-builder

這一步需要拉取electron-vX.Y.Z-win32-x64.zip，過程非常漫長。

3. 執行專案

執行electron專案。

npm run electron:serve

4. node通訊

正常來說vue元件應該只關心頁面層的邏輯即可，所以為了解耦，可以在Vue Component和Node API、Electron API中間插入一個橋接層，然後通過IPC進行通訊，如下圖所示：

按照關係圖，Vue Commponent通過Service釋出事件，完成與Node API和Electron API的通訊，下面根據這個關係寫一個讀取檔案內容的示例。

建立Service，釋出事件並監聽

/bridge/service/Service.js

import { ipcRenderer } from 'electron'
class Service {
 readTxt(params,callback) {
  ipcRenderer.once('readTxt',(e,ret) => callback(ret))
  // 將params引數傳給Server
  ipcRenderer.send('readTxt',params)
 }
}
export default new Service()

建立Server，監聽事件並讀取檔案內容返回

/bridge/server/Server.js

import { ipcMain } from "electron";
import fs from 'fs'
export default class Server {
 constructor(app,win) {
  this.app = app
  this.win = win
 }
 initEventHandler() {
  ipcMain.on('readTxt',params) => {
   // 這裡將引數轉化為json，然後讀取G:\\0.txt的內容一起返回
   const pms = JSON.stringify(params)
   const ret = fs.readFileSync('G:\\0.txt')
   e.sender.send('readTxt',pms + '::::' + ret)
  })
 }
}

啟動Server

在建立完Server之後，需要在應用程式啟動的時候啟動並讓其監聽對應的事件。

這裡可以建立一個ApplicationContext，來啟動Server。

/bridge/ApplicationContext.js

import Server from './server/Server'
export default class ApplicationContext {
 constructor(app,window) {
  this.app = app
  this.window = window
 }
 init() {
  new Server(this.app,this.window).initEventHandler()
 }
}

然後在background.js中例項化ApplicationContext，並呼叫init方法。

 win.on('closed',() => {
  win = null
 })
 // Windows建立完成後初始化context
 new ApplicationContext(app,win).init()

Vue元件呼叫Service

完成上面三步之後，只需要在vue元件中呼叫Service即可，這一步跟普通開發vue程式是一樣的。

<div>{{txt}}</div>
<button @click="readTxt">讀取檔案資訊</button>

<script>
import service from '@/bridge/service/Service'
export default {
 name: 'HelloWorld',props: {
  msg: String
 },data() {
  return {
   txt: ''
  }
 },methods: {
  readTxt() {
   // 這裡傳入兩個引數，並將返回結果賦值給txt，在div中顯示出來
   service.readTxt({
    p1: '引數1',p2: '引數2'
   },resp => {
    this.txt = resp
   })
  }
 }
}
</script>

至此，一個electron helloworld示例就完成了。

5. node API undefind

在上面的過程中可能會遇到node API undefined的情況，這是因為electron禁用了node整合，在background.js中建立window的時候指定了配置：

webPreferences: {
   // Use pluginOptions.nodeIntegration,leave this alone
   // See nklayman.github.io/vue-cli-plugin-electron builder/guide/security.html#node-integration for more info
   nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
   // nodeIntegration: true
}

這裡可以通過配置electronBuilder外掛解決。

在專案目錄根目錄下面建立vue.config.js，內容如下：

// see https://cli.vuejs.org/config
module.exports = {
 productionSourceMap: false,pluginOptions: {
  electronBuilder: {
   nodeIntegration: true,},configureWebpack: {
   resolve: {
    symlinks: true
   }
  }
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。