liulun的博客

当鼠标在圆形区域外移动时，窗口对象的mousemove事件触发，event.target为document.documentElement对象（这个事件并不是在html或body元素上触发的，而是在窗口对象上触发的，document.documentElement就是DOM树中的根元素，也就是html节点所代表的元素）。首先，需要用到窗口对象的setIgnoreMouseEvents方法，该方法可以使窗口忽略窗口内的所有鼠标事件，并且在此窗口中发生的所有鼠标事件都将被传递到此窗口背后的内容。

通过本章内容的讲解，我带领大家学习了 Electron 框架的由来、Electron 框架的价值、Electron 框架的基本原理以及 Electron 框架有哪些不足。希望读者通过阅读本章内容对 Electron 框架有一个基本的认识，知道 Electron 框架可以为我们带来什么价值，以及这些价值背后的隐患。有了这些知识我们就可以更从容的进入 Electron 应用开发的战场了，还等什么，随我来吧。

Electron团队提供remote模块给开发者，主要目的是为了简化渲染进程和主进程互访的难度，这个目的却是达到了。但也带来了很多问题，归纳起来主要分为以下四点：第一：它很慢通过remote模块可以访问主进程的对象、类型、方法，但这些操作都是跨进程的，跨进程操作性能上的损耗可能是进程内操作的几百倍甚至上千倍。假设你在渲染进程通过remote模块创建了一个BrowserWindow对象，不但你创建这个对象的过程很慢，后面你使用这个对象的过程也很慢。小到更新这个对

现象开发一个无边框窗口，为元素设置hover样式后，鼠标移上元素，hover样式生效鼠标快速移出目标元素区域，hover样式并没有消失，如下图所示（此现象尤其发生在目标元素靠近窗口边缘时）如果你在这个元素上安装了mouseleave或mouseout事件，那么这个事件也不会被触发根因这是Electron的一个BUG，只发生在无边框窗口上https://github.com/electron/electron/issues/611并且这个BUG在2014年就被提出来了2

楔子上一篇文章（https://blog.youkuaiyun.com/liulun/article/details/110953968）中，我们讲了Electron+Vite的开发环境，并成功的加载了本地Vue3项目的页面这一节我们讲如何编译打包项目使用electron-builder打包electron应用，需要经过如下几步：1：把静态资源html,css,js,img等编译好，放到指定的目录2：把主进程代码编译好，放到指定目录3：制作一个package.json指定入口文件为主进程

背景目前社区两大Vue+Electron的脚手架：electron-vue和vue-cli-plugin-electron-builder，都有这样那样的问题，且都还不支持Vue3，然而Vue3已是大势所趋，Vite势必也将成为官方Vue脚手架，下图是尤雨溪在开发好Vite之后与webpack之父的对话所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈我前段时间做了一个，但是发现了一些与Vite有关的问题，比如：Vite会把开发环境的proce..

我们在package.json里能找到他的入口文件；"main": "./out/main",electron是分主进程和渲染进程的；渲染进程是主进程启动的；./out/main.js显然这就是主进程的入口程序；确实不假但别着急去分析这个文件；因为它是在out目录下，明显是什么东西输出出来的；我们先打扫一遍src目录下的东西；发现了tsconfig.json"outDir": "../out",哈，这是typescript代码，编译后输出到./out/目录下的；那么我们来

安装git，nodejs和yarn安装Python27，3.x版本的不行，确保它在你的环境变量里；安装gulpnpm install --global gulp-cli安装windows build tools：npm install --global windows-build-tools --vs2015安装node-gypnpm install -g node-gyp上面安装的一大堆东西，看似没无关，其实他们大都是用来编译原生nodejs插件的，nodejs的原生插