1. 项目简介

本项目为TCP/IP大作业翻牌游戏中客户端部分。

本项目使用Vue作为前端框架，并使用Vue CLI Plugin Electron Builder插件辅助构建Electron应用。

本项目package.json文件：

{"name": "purble-pairs-client","version": "0.1.0","author": "lime2019@foxmail.com","description": "翻牌游戏客户端","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","electron:serve": "vue-cli-service electron:serve","electron:build": "vue-cli-service electron:build","postinstall": "electron-builder install-app-deps","postuninstall": "electron-builder install-app-deps"},"main": "background.js","dependencies": {"core-js": "^3.6.5","element-ui": "^2.15.1","vue": "^2.6.11","vue-router": "^3.2.0"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","babel-plugin-component": "^1.1.1","electron": "^11.0.0","electron-devtools-installer": "^3.1.0","vue-cli-plugin-electron-builder": "~2.0.0-rc.6","vue-template-compiler": "^2.6.11"}
}

使用的是Electron 11.0.0。

2. IPC配置

由于本项目中渲染进程并不需要使用Node环境，仅需要使用IPC。因此根据Vue CLI Plugin Electron Builder官方文档中Node Integration部分内容可实现Electron中使用IPC的相关配置。

2.1 创建预加载脚本

Preload Files 允许在Vue应用 (shared variable)的上下文中通过Node integration执行JS。

在src文件夹下创建preload.js文件

// src/preload.js
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer

2.2 配置预加载脚本

根据Vue CLI Plugin Electron Builder官方文档中Preload Files要求进行配置：

// vue.config.js
module.exports = {pluginOptions: {electronBuilder: {preload : 'src/preload.js',}}
}

2.3 更新主进程中调用

// src/background.js
const win = new BrowserWindow({width: 800,height: 600,title : "Lime翻牌游戏",icon : "src/assets/logo.ico",webPreferences: {nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,preload: path.join(__dirname, 'preload.js')}
})

然后需要重新运行electron:serve使相关配置生效。

之后，即可使用window.ipcRenderer进行客户端。

3. 主进程使用IPC

4. 渲染进程使用IPC

Electron（基于Vue）中使用IPC相关推荐

vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
vue v-html scoped,基于vue中的scoped坑点解说
今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这 ...
使用electron和vue，以ipc通信的方式构建客户端版本的掘金首页
1. 使用electron-vue新建基于vue的electron环境,更多配置请访问源项目 npm i -g vue-cli vue init simulatedgreg/electron-vue ...
Today：基于 Electron 和 Vue.js 的 GTD 应用
这是我的一个 side project.今天发布了第一个预览版本 v0.0.2,欢迎访问 GitHub 上面的 Repo 获取试用下载(目前仅为 Mac 用户提供 build),并提供你们的宝贵意见和 ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）
注册/找回密码等功能中发送手机验证码后倒计时效果的实现,基于vue.element-ui <template><el-button size="small" ty ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
基于Vue源码中e2e测试实践
您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~ 基于Vue源码中e2e测试实践前言技术选型&对Vue的参考 Puppeteer测试流程在Concis中 ...
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（中）
文章目录 Vuex实现左侧菜单栏折叠效果展示思路分析及代码实现漏洞完善 Home组件的实现名片部分 table数据展示部分订单统计部分实现首页可视化图表样式调整 ECharts基本使用折 ...

Electron（基于Vue）中使用IPC

使用IPC