Electron结合Vue使用 探索（一）

已于 2023-08-29 19:26:54 修改
阅读量189 收藏
点赞数
分类专栏： Electron 文章标签： electron javascript 前端
于 2023-08-29 19:26:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52510500/article/details/132554756
版权
作者分享了使用Electron和Vue开发仿微信应用的经历，涉及窗口样式、系统托盘、通信等问题的解决方案，包括自定义窗口可拖拽、处理图片拖拽和正确退出应用的方法。
摘要由CSDN通过智能技术生成

最近在了解Electron，想去仿写一下微信的部分功能，在学习中也遇到挺多问题的，在这里想和大家分享，问题不是啥复杂的问题，希望大佬勿喷... 目前的话，才实现基本的架子样式，以及部分Electron中的基本功能（包括系统托盘、层级置顶、最大化、最小化以及关闭等），下一步准备实现下聊天和好友列表的路由界面以及渲染进程之间的通信，我们看下现在的效果图吧...

目前我所在做的是Electron结合Vue的案例，首先就是通过Vue CLI脚手架去创建一个Vue项目，没有Vue Cli的小伙伴，npm i @vue/cli -g安装一下就好了，然后通过命令vue add electron-builder  下载并安装 Electron 和 electron-builder 插件，并将相关配置添加到项目中，最后再通过npm run electron:build命令 去运行程序就可以了...

在创建到运行项目中遇到的一些问题 ，在这里我就不去一一分享了，有问题的小伙伴可以直接私信我，在这里我就贴下node和vue的版本，这都会导致项目运行报错，让新学的小伙伴少走一些弯路...

接下来就来分享一下在做Electron中基础功能的过程中，遇到的一些问题...

由于设置的无边框窗口，所以就要我们自己再去设置窗口的可拖拽，如果需要在某个dom上添加事件，就需要添加禁止拖拽的属性， 这时候如果dom内包含图片、图标，那么问题来了，你会发现图片会被拖拽走，当时测试了挺多方法都没有成功，接下来看下怎么解决，看完你会觉得很简单...

 还有一个问题就是，在配置系统托盘的时候，在右击事件中配置了退出程序的方法，当时调用的是app.quit()，发现并没有实现直接退出程序，最后去文档了解了一下，使用该方法，会在最后一个窗口被关闭时退出应用，回来改用app.exit()强制退出程序，成功的解决了自己的需求...

接下来的这段时间，还会去和大家分享在Electron过程中遇到的一些问题，有喜欢的小伙伴可以给个star... 

BelieveTom、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索Vue与Electron的完美融合：一个强大的跨平台应用开发框架
gitblog_00093的博客
06-06 341
探索Vue与Electron的完美融合：一个强大的跨平台应用开发框架 项目地址:https://gitcode.com/sohelamin/electron-vue-boilerplate 在当今这个追求高效、跨平台的软件开发时代，我们常常寻找那个能将前端的灵动与桌面应用的强大无缝结合的解决方案。今天，让我们一起揭开【Electron & Vue.js】开源项目的神秘面纱，这是一个基于El...
创建electron+vue项目（vue 一）
qq_34533703的博客
05-06 328
创建electron+vue项目
Electron学习记录（二）-在Electron中使用vue3
sinat_37066308的博客
04-23 4006
本质就是用vue写前端页面，然后用Electron套壳，通过window传递消息，实现前端和node之间的通信。
electron+vue3的基本使用及通信
xiaodouxuan11的博客
10-23 7428
环境参数 node -v v14.16.0 vue --version @vue/cli 4.5.11 electron应用是多进程的，而这个进程是分两种，一种是主进程[main]（主进程就是background.js所来承载的进程就是主进程），还有一种就是渲染进程[ready]（渲染进程就是打开的窗口）；主进程就一个，而渲染进程会有多个； 至于为什么electron应用采用的是多进程，而不是多线程，这主要是因为electron基于Chrome内核，而Chrome内核就是多进程的 一、创建vue3.
Vite + Vue3 + Electron实现进程通信
mo911108的博客
06-30 3217
Electron 内置了 Chromium 和 Node.js：Chromium 是渲染进程，用于渲染、解析 HTMLNode.js 是主进程渲染进程 / 主进程，使用 IPC 进行通信。
Electron + Vue3 开发桌面应用
热门推荐
Hyung的博客
01-04 2万+
Electron + Vue3 开发桌面应用
Electron-vue脚手架改造vue项目的方法
10-17
Electron-vue是一种结合了Vue.js和Electron的开发框架，用于构建桌面应用程序。它允许开发者利用Vue.js的便利性和Electron的桌面应用能力。在本文中，我们将深入探讨Electron的基本概念，Electron-vue的特点，以及...
Electron整合React使用搭建开发环境的步骤详解
10-15
将 Electron 与 React 结合，开发者可以利用 React 的组件化和状态管理能力来构建桌面应用。以下是对“Electron 整合 React 使用搭建开发环境的步骤详解”的详细阐述。 首先，创建 React 项目。使用 `npx create-...
my-electron-app：我的第一个电子应用程序
02-21
3. **前端框架集成**：如果你的项目使用 React、Vue 或 Angular 等前端框架，学习如何将它们与 Electron 结合。 4. **事件驱动编程**：Electron 应用基于事件驱动模型，理解和熟练使用事件监听和触发是必要的。 5....
electron-php-framework:电子PHP框架
05-25
这个框架结合了Electron和PHP两大技术，为开发者提供了一种新的构建跨平台桌面应用的方式。尽管目前仍处于实验阶段，但其潜力不容忽视。 **Electron概述** Electron是由GitHub开发的一款开源框架，允许开发者使用...
Vue+Electron：常用配置
sw7662504的专栏
10-23 3829
一. 构建配置 electron的相关配置和vue共用一个文件vue.config.js，注意，这个文件如果不存在，需要自己新建一个。下面是配置所在位置 // vue.config.js module.exports = { pluginOptions: { electronBuilder: { builderOptions: { // 用户自己的构建配置放在这里 // 在这里的配置将会和默认配置合并，
打包Electron+Vue生成windows.exe桌面程序流程
志在远方
01-12 1009
一. 本教程是以Vue-CLI 3 或 4为基础 为了不报错 卸载以前的脚手架 npm uninstall -g vue-cli 安装最新版脚手架 cnpm install -g @vue/cli 创建一个 vue 随便起个名 vue create electron-vue-example (随便起个名字electron-vue-example) 进入 创建过的 vue文件 cd electron-vue-example 运行 vue npm run serve 将vue 添加 electron
Vue+Electron学习系列 (二) -- 打包发布
Bennett_G博客
09-17 2402
1️⃣Vue+Electron学习系列 (一) -- 初识2️⃣ Vue+Electron学习系列 (二) -- 打包发布3️⃣ Vue+Electron学习系列 (三) -- 自动更新4️⃣ Vue+Electron学习系列 (四) -- 自动更新进阶 问题1：cannot execute file does not exist 问题2：无效图标 invalid icon file......
第十二章：Electron-Vue渲染进程和主进程通信、shell使用、使用node模块
黄孝果的博客
08-03 1764
渲染进程和主进程通信 1、渲染进程 <div> <button @click="sendMsg">给主进程广播数据</button> </div> methods: { sendMsg() { this.$electron.ipcRenderer.send("tomain", "我是渲染进程"); }, } 2、主进程 import {ipcMain} from 'electron' //接收渲染.
实践解析：如何用Electron实现跨平台视频会议应用
声网的博客
03-20 1万+
作者简介：张乾泽，声网 Agora Web 研发工程师 对于在线教育、医疗、视频会议等场景来讲，开发面向 Windows、Mac 的跨平台客户端是必不可少的一步。在过去，每个操作系统的应用需用特定的编程语言编写，每个客户端都需要单独开发。而现在我们可以利用多种工具、框架进行跨平台开发。Electron 就是其中最热门的一个。 Electron 的前身是Atom Shell，是基于Nod...
使用 Electron 搭建一个实时视频App
weixin_33958366的博客
12-06 1661
当你使用Weex、ReactNative、Hubuilder构建手机App的时候，你可曾想过桌面应用也应该有一种这样类似Hybrid的方式，让开发者更好的构建桌面应用。 Electron就是使用JavaScript、HTML、CSS等Web技术构建原生程序的框架，Electron是基于Chromium和NodeJS（NodeJS应该是世界上最好的语言），项目完成后封装成一个可以单独运行的Node...
Electron基础(一) 实现最大化、最小化、关闭窗口功能
最新发布
在下魔王ii的博客
08-30 228
在 Electron 中，默认情况下，如果你没有隐藏或自定义窗口的标题栏，那么窗口的最小化和关闭按钮通常是自动提供的。但是，当你通过frame: false选项隐藏了默认的窗口边框和标题栏时，你需要自己实现这些功能。
electron-vue 使用serialport
04-05
要在electron-vue中使用serialport，需要先安装serialport和node-serialport： ``` npm install serialport npm install @serialport/bindings ``` 接下来，在Vue组件或其他JavaScript文件中，可以像这样导入serialport： ```javascript const SerialPort = require('serialport') ``` 然后，您可以使用serialport API来打开串口、读取/写入数据，例如： ```javascript // 打开串口 const port = new SerialPort('/dev/ttyUSB0', { baudRate: 9600 }) // 监听串口数据 port.on('data', data => { console.log('Received data:', data) }) // 发送数据到串口 port.write('Hello world') ``` 注意：在使用serialport时，您需要具有在系统上打开串口的权限。在某些操作系统上，您可能需要使用sudo或者在系统上设置权限。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值