基于Electron实现桌⾯应⽤开发代码实例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) {
<('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() {
<('readTxt', (e, 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之后，需要在应⽤程序启动的时候启动并让其监听对应的事件。
electron vue教程这⾥可以创建⼀个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⽅法。
<('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中显⽰出来
p1: '参数1',
p2: '参数2'
}, resp => {
< = resp
})
}
}
}
</script>
⾄此，⼀个electron helloworld⽰例就完成了。
5. node API undefind
在上⾯的过程中可能会遇到node API undefined的情况，这是因为electron禁⽤了node集成，在background.js中创建window 的时候指定了配置：
webPreferences: {
// deIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron builder/guide/security.html#node-integration for more info
nodeIntegration: v.ELECTRON_NODE_INTEGRATION
// nodeIntegration: true
}
这⾥可以通过配置electronBuilder插件解决。
在项⽬⽬录根⽬录下⾯创建fig.js，内容如下：
// see /config
productionSourceMap: false,
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
},
configureWebpack: {
resolve: {
symlinks: true
}
}
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。