关注前端，关注原创

同学们可以私信我加入学习群！最近electron更新频繁，而我在用electron做个人项目，对稳定性没有太高要求，希望保持着electron的最新版本，所以就没有固定版本。单位网络不太好，打包时遇到无法下载资源包的问题：如图所示：第一反应，当然是希望修改镜像源，让打包工具可以自行下载资源包。但是如果镜像源设置后，都无法下载，就需要我们手动下载资源包了。截止到2024年5月31日，淘宝镜像源资源地址为：https://registry.npmmirror.com/binary.html打开后，是所有的

最近想要把自己写的一些知识点，在写完demo后，除了形成博客记录笔记，还可以便捷地录屏形成视频教程。所以研究了好久如何在nodejs中完成录屏功能。本功能模块基于electron+vue3完成，原生nodejs也可以作为参考，原理是一致的。踩了很多坑，否了很多方案后，终于形成了目前的方案。ffmpeg插件：这是真正的录屏插件，windows系统中以exe可执行文件形式存在，其它所有插件都是围绕它开发。

最近electron更新到了30大版本，里面更新的一个重大变化是主进程增加了 WebContentsView 和 BaseWindow，对窗口的控制会更加丝滑。正好最近在做把文章或者视频一键发布到各自媒体平台的工具，所以决定把BrowserWindow的实现改为BaseWindow，当然如果查看源码会发现，其实两者是继承关系，BrowserWindow作为封装后的API，还是更简便的。

项目需要ocr技术识别图片中的中文字符，本来这部分是后端的工作，但是因为各种原因，决定前端也做一个版本。在ai时代之前，ocr技术有一个扛鼎插件——tesseract。现在如果搭建本地ai服务，如果不是通过调用接口的方式做一个api搬运工，就需要在本地部署站点，在一些场景中，仍稍显臃肿。所以本文开一点历史倒车，介绍下这个相比ai，更轻量化的插件。现在的问题是，官网的中文语言包下载链接失效，默认的语言包是英文，中文识别率感人。等我解决中文识别问题，再把electron打包后的软件和各种资源公布。

前面有篇文章讲过基于echarts的大屏可视化一些基础概念，其中提到和动画相关的插件有：lottie、gsap、svga等，本篇文章的主题是svga，但不是技术硬文，只是向大家介绍我最近写的一款工具——svga预览工具。正版软件会一直免费，所以请大家放心使用博主开发的正版软件。如果软件被破解，绕过通行码直接登录，后续对宿主机造成一切后果，请使用者自行承担。大家多多支持博主的公众号，新开小号，需要多多关注，拜谢大家：或者。

以后在electron的主进程中引入插件可能还会遇到这个问题，到时候统一使用这种方式排除模块即可。node版本管理可视化工具马上就要完成了，有兴趣的小伙伴可以提前关注一波。

通过前面系列文章我们可以了解到，窗口是通过实例化BrowserWindow对象创建的，实例化时会传入一些窗口的参数。要实现窗口自定义，就必须把窗口默认样式都屏蔽。参数含义很好理解，窗体透明无边框，参数详解请查询官网。把系统自带的窗体样式去掉后，我们会得到一个只有主体的窗口，这个主体就是前端（vue）渲染的窗口，我们可以通过控制它，来实现任何样式的窗口。

如果跟着本系列文章一路学习，到现在应该已经可以使用electron+vue开发项目。但是这样开发的项目，打包后electron主进程部分是以源码的形式存在的，这样有利于前期的技术研究，梳理清楚打包后各文件的关系等等。但是，真正的项目中，这样的代码太容易被人拿去抄袭。所以需要借助rollup+terser，对源码进行压缩混淆等操作。不过这些开源工具压缩后的代码，也只是增加了逆向的复杂度，如果需要更安全的代码保护，请借助专业付费的安全软件。码云地址。

在自己的项目中集成ai大模型，更便利地利用人工智能提效

因为我的软件在安装时，有很多操作注册表的需求，所以就需要获取最高的权限，网上这方面资料太少了，找了半天都没找到有参考价值的资料。今天解决了这个问题，记录一下。低阶api程序员，早晚被AI干掉。

有位同学问到一个问题，大致意思就是他创建了子窗口，但是子窗口的右键菜单没有生效，如图：他的代码大致看了下，虽然没找到})但是代码里有contextMenu.popup()，应该是在某个地方做了监听吧。因为没有完整代码，我没办法明确告诉同学具体哪里做错了，但我可以把正确写法发布出来，免得一直在评论区长篇对话。大家有什么问题也可以私信博主，没人问都懒得写文章了。

上篇文章主要讲解了electron、nodejs的相关概念。本篇文章将主要介绍vue3，以及vue3如何与electron协作完成桌面端功能。同上篇文章一样，这是一篇务虚的文章，读完本文，你可能学不到任何手写vue3代码的经验，你也不会记住vue3与electron通信的api，你更不需要去了解vue解析文章常聊的虚拟node、diff算法，proxy代理监听……等等让人听起来曲高和寡的东西。但是读完本文，你大概率会发出一句这样的感慨：哦，原来这就是vue啊，用起来这么方便！

electron、nodejs的一些概念理解

上一篇文章我们已经介绍过如何通过手动操作注册表的方式，自定义我们的二级级联菜单。下面我们要做的就是，怎么在electron中操作注册表，复现上篇文章实现的功能。按照惯例，我应该把上面第二节的内容放到这里，但是没办法，如果放过来，显得文章太单薄。不过文章体量不大，其实知识点很有价值，直接参考文章的同学，是不会理解我把注册表一项一项地翻一遍，查找二级菜单失效原因时的苦恼的。网络上相关资源甚少，契合electron的就更少了。

从本系列第六篇文章开始，我们一共用三篇文章讲解了系统级右键实现文件上传、手动修改注册表实现级联菜单、electron操作修改注册表实现级联菜单。网络上大部分文章也止步于此，但是在很多业务场景下，我们都需要右键选中多个文件，实现一键上传功能。如图：网上部分文章也提到了多选文件（图片）并上传，但是基本都未进行任何代码操作，而是使用鼠标拖动多个文件放到electron应用的图标，利用electron默认的能力实现多文件上传，针对我们具体的需求，这种方式只能算是一种无法解决问题时的妥协方案。

上篇文章介绍了基于router插件，view ui的路由实现。本篇文章在上文的基础上，借助router.js中配置的参数，实现首页快捷导航。通过对router的改造，进一步理解路由的用法。如果理解了上篇文章中基于router实现导航栏，那么本文只能算是个小demo，旨在打开思路——只要设计合理，router.js中的对象属性是可以随心所欲操作的。其实不论是导航栏的渲染，还是首页快捷导航的渲染，都蕴藏了一个前端很重要的思路——渲染逻辑和业务逻辑解耦。渲染逻辑，就是我拿到数据后，如何把数据渲染成页面。

nodemon报错Uncaught ReferenceError: process is not defined

修改注册表，在windows系统创建二级级联菜单

webstorm开发electron，调试主进程方案

上篇文章我们讲解了Vue Router路由管理工具基本的使用，但是如果同学们没有项目经验，即时看明白官方文档，也很难真正将所学应用到项目中，造成一看就懂，一用就废的尴尬局面。如何把Vue Router真正应用到项目中，才是我们的重中之重。其实写这篇文章之前，我是很犹豫的，因为很多东西，原理很简单，应用就略麻烦，写出来就更麻烦，最主要的是，我也不知道写完了，会不会有帮助。在这里抛砖引玉，有不当的地方，欢迎大佬指正。这部分代码略多，没办法都粘贴上来，如果有兴趣详细了解的同学，可私聊或评论我获取源码。

上篇文章我们已经完成了Vue3项目选型，路由管理工具使用官方推荐的Vue Router。第一次构建完整的路由管理，我建议采用iview推荐项目提供的模板，虽然模板项目很鸡贼地删减了一些优化设计，但是也足以搭建一个简易的路由管理。本文简单讲解了vue router工具的使用步骤，但只是这样，还远远不足以支撑企业级平台的搭建，一个真正能够应用于实战项目的路由设计，最起码要包含图标、路由嵌套等设计，如何搭建企业级的导航栏，留待下篇文章讲解。

深入了解vue3文件结构，彻底学会如何在vue中使用插件与工具，基于vue3+view ui，构建一套企业级管理平台

vue3+electron开发桌面软件，系统级右键实现文件上传功能。非软件内右键菜单

electron托盘、软件内右键菜单实现。

用最简单的描述，帮你理解electron的进程通信。具体源码，请私信作者获取。

vue3+electron的模块化改造，窗口位置记录工具，命令行合并工具，让你的应用更趋近于企业级

electron+vue3+vite+electron-builder项目级打包方案，vite配置讲解，vue打包编译讲解，package.json配置讲解

因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。这个问题的答案可能很简单，但是其实体现的是vue和electron的关系。如果你仔细阅读electron官网并思考过，应该已经理解electron项目运行时，相当于是一个壳，壳里面集成了nodejs、v8引擎等必须的环境。

基于vue3+electron+vite，前端开发electron桌面端入门与实战，把一个最基础的electron项目运行起来，只需要简单的两步，十分钟必会。