Electron（基于Vue）中使用IPC

最新推荐文章于 2025-05-08 16:15:53 发布
最新推荐文章于 2025-05-08 16:15:53 发布
阅读量2.7k 收藏 6
点赞数
分类专栏： # 客户端开发 文章标签： electron ipc vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44171004/article/details/117776842
版权

IPC（InterProcess Communication，进程间通信）指在不同进程之间传播或交换信息。

使用IPC

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":</
最低0.47元/天 解锁文章
electron进程通信之文件保存
weixin_45632692的博客
12-06 791
ipcMain模块是EventEmitter类的一个实例。在主进程中使用时，它处理从渲染器进程（网页）发送的异步和同步消息。从渲染器发送的消息将发送到此模块。 在渲染进程创建一个保存按钮，并向主进程发送消息： test.vue <template> <a-button icon="branches" @click="exportExcel">导出</a-button...
electron+Vue3构建桌面应用之IPC通讯
Leo_DLi的博客
04-16 1027
过程中遇到 Electron 与 Vue3 通讯的问题，费劲巴力的在网上找方案，发现都不理想，最终攻克之后，计划将过程写下来，供有需求的同学白嫖！好，言归正传。先说需求，我是做一个 C/S 架构的串口数据获取的需求预研。另外，项目组 Vue 人才较多，所以，期望后期可以接上 Vue。有同学就说了，你 Vue 要获取串口信息，不是可以直接使用吗？
electron ipc 通讯
咖啡如同生活的专栏
06-05 1103
ipc通讯主要是 界面层和gui后台进程的通讯；从渲染器进程到主进程的异步通信后台主进程：import { app, BrowserWindow,ipcMain } from 'electron' 直接在app的监听时间后面追加就行了 app.on('activate', () =&gt; { if (mainWindow === null) { createWindow() ...
深入理解 Electron 的 IPC 通信机制：主渲染进程消息传递实战
最新发布
2501_91537388的博客
05-08 443
模块所在进程作用ipcMain主进程监听渲染进程发送的消息渲染进程向主进程发送消息此外，为了增强安全性，自推荐使用和preload.js实现隔离通信。主渲染进程间必须使用 IPC 通信；推荐使用preload.js实现安全通信；灵活使用send/on实现双向交互；在大型项目中，建议封装消息协议或使用状态管理来统一通信逻辑。
使用electron和vue，以ipc通信的方式构建客户端版本的掘金首页
weixin_34354173的博客
01-31 2529
1. 使用electron-vue新建基于vue的electron环境，更多配置请访问源项目 npm i -g vue-cli vue init simulatedgreg/electron-vue my-project cd my-project npm i npm run dev 复制代码2. 打通electron主进程与渲染进程的通信 定义常量作为channel，也就是事件类型名称 co...
electron+vue3全家桶+vite项目搭建【13.1】ipc通信的使用，主进程与渲染进程之间的交互
个人网站：https://www.longzipeng.online
08-06 2497
electron中ipc通信的使用，主进程与渲染进程之间的交互
《基于Electron + Vue的桌面音乐助手的设计与实现》代码.zip
05-04
《基于Electron + Vue的桌面音乐助手》是一个融合了现代前端技术与桌面应用开发...这个项目的代码结构和实现方式，对于学习和理解Web技术在桌面应用中的应用，以及Vue.js和Electron的整合使用，具有很高的参考价值。
vue3-electron:使用Vue 3和Electronic创建文件资源管理器
05-26
3. **Teleport**：Vue 3的Teleport功能允许将组件“传送”到DOM中的其他位置，这对于解决Electron应用中特定元素需要插入到主进程中（如Electron的`webPreferences.webSecurity`设置）的情况非常有用。 4. **...
vue+electron ipc+sql相关开发（三）
在全栈和前端徘徊的程序员
04-16 711
在 Electron 中使用 IPC（Inter-Process Communication）与 SQLite 数据库进行通信是一个常见的模式，特别是在需要将数据库操作从渲染进程（Vue.js）移到主进程（Electron）的情况下。这样可以更好地管理数据库连接和提高安全性。下一篇介绍结合axios写成通用接口形式，虽然没啥卵用（个人觉得），只是前端调用好看╮(╯▽╰)╭ 建议将读取固定安装路径的数据改成，在运行程序时在C盘用户目录下创建sql文件，避免后期程序更新或删除程序把数据库一块清掉的问题 使用 V
vue_ipc:用于vue +电子的IPC渲染插件
05-02
vue_ipc 一个用于vue +电子的IPC渲染插件，您可以像ajax一样简单地与电子主进程进行通信。 安装 npm run install vue_ipc # or yarn add vue_ipc 用法 首先，导入您的Vue项目： // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueIPC from 'vue_ipc' ; + Vue . use ( VueIPC ) ; Vue . config . productionTip = false ; new Vue ( { router , store , render : h => h ( App ) } ) .
Electron 调用本地模块
热门推荐
u011256637的专栏
04-05 1万+
Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API（如打开文件窗口、通知、图标等，基于 Electron 的开发，就好像开发一个网页一样，而且能够无缝地使用 Node。或者说：就好像构建一个 Node app，并通过 HTML 和 CSS 构建界面。 那么如何在页面中调用 Node API 呢？
electron 通讯 ipcRenderer 、ipcMain、mainWindow.webContents.send
九段刀客的博客
04-28 3570
一、主进程(electron)发信息，窗口页面接收 这个mainWindow是new BrowserWindow创建的那个webview窗口 electron主进程发送信息 mainWindow.webContents.send("test111", "九段刀客"); 窗口也就是比如vue项目中接收 xxx.vue const { ipcRenderer } = require("electron"); //第二个参数是传过来的值 ipcRenderer.on("ping", (event, mes
electron窗口和主进程通信ipc
zhangrui_web的博客
10-23 1818
Electron与前端通信ipc const electron = require('electron') const { app } = electron const ipc = require('electron').ipcMain const { BrowserWindow } = electron let win ipc.on('getMsg', (sys, msg) =&g...
解决vue3 + electron 中使用ipcRenderer报错的问题
九段刀客的博客
02-06 1万+
版本信息 “electron”: “^13.0.0”, “vue”: “^3.2.19” 报错原因 electron新版本默认禁止页面中直接操作 electron的相关api 解决办法 通过脚本注入webview中，将要操作的api添加到全局变量中 1、vue.config.js module.exports = { pluginOptions: { electronBuilder: { preload: "src/preload.js" } } }; 2、pre
vue+electron IPC+sql相关开发（一）
在全栈和前端徘徊的程序员
04-12 432
IPC（Inter-Process Communication，进程间通信）是主进程和渲染进程之间进行通信的核心机制。electron+vue+sql本地数据交互开发。
Vue3 + Electron 打造桌面应用：IPC通讯详解及常见问题解决方案
qq_43326668的博客
05-23 4890
在 Electron 和 Vue3 中进行 IPC（进程间通讯）通讯是非常常见的操作，它可以让主进程和渲染进程之间进行数据传递和函数调用。在默认情况下，Electron 的渲染进程与主进程是隔离的，这意味着渲染进程无法访问主进程的敏感信息，例如文件系统、操作系统 API 等等。参数后，渲染进程会在一个独立的 JavaScript 上下文中运行，与主进程和其他渲染进程隔离开来，从而可以避免一些安全风险。但是在 Electron 中，渲染进程与主进程之间的通信是通过 IPC（进程间通信）机制实现的。
electron 渲染层和主线层通讯（ipcMain+ipcRenderer）
weixin_42623929的博客
09-04 610
config.output.filename('background.js') //解决 运行 yarn run electron:serve 报[DEP0128] DeprecationWarning: Invalid 'main' field in '\dist_electron\package.json' of 'background.js'.mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置。
vue3 vite4 electron ipc 通信读取项目当中文件
pod_dragon的博客
08-02 1089
vue3 vite4 electron ipc 通信读取项目当中文件
Electron-vue开发实战1——Main进程和Renderer进程的简单开发
weixin_33795093的博客
01-17 2609
前言 前段时间，我用electron-vue开发了一款跨平台（目前支持Mac和Windows）的免费开源的图床上传应用——PicGo，在开发过程中踩了不少的坑，不仅来自应用的业务逻辑本身，也来自electron本身。在开发这个应用过程中，我学了不少的东西。因为我也是从0开始学习electron，所以很多经历应该也能给初学、想学electron开发的同学们一些启发和指示。故而写一份Electron的...
使用test-electron-vue获取电脑MAC地址指南
在Electron的主进程中使用Node.js的API来获取系统信息。可以使用`os`模块的`networkInterfaces()`方法来获取所有网络接口信息，然后根据接口类型筛选出真实的MAC地址。 5. **集成到Vue应用中**： 将获取到的MAC...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值