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', (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之后,需要在应用程序启动的时候启动并让其监听对应的事件。
这里可以创建一个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 } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 罗大佑1982《之乎者也》无法盗版的青春套装版 [WAV+CUE][1G]
- 曾庆瑜1989-款款柔情[日本东芝版][WAV+CUE]
- Scelsi-IntegraledesquatuorsacordesetTrioacordes-QuatuorMolinari(2024)[24bit-WAV]
- 房东的猫2017-房东的猫[科文音像][WAV+CUE]
- 杨乃文.2016-离心力(引进版)【亚神音乐】【WAV+CUE】
- 群星.2024-珠帘玉幕影视原声带【TME】【FLAC分轨】
- 芝麻龙眼.2008-光阴隧道民歌记录3CD【乡城】【WAV+CUE】
- 谭艳《再度重相逢HQII》头版限量[低速原抓WAV+CUE][549M]
- ABC唱片《蔡琴三十周年纪念版》6N纯银镀膜 [WAV+CUE][1.1G]
- 海来阿木《西楼情歌》开盘母带[WAV+CUE][1.1G]
- TheGesualdoSix-QueenofHeartsLamentsandSongsofRegretforQueensTerrestrialandCele
- 王建杰2011-荣华富贵[喜玛拉雅][WAV+CUE]
- 孙悦2024-时光音乐会[金蜂][WAV+CUE]
- 秦宇子.2020-#YUZI【海蝶】【FLAC分轨】
- 苏有朋.1994-这般发生【华纳】【WAV+CUE】