结合vue搭建electron桌面应用

electron是什么?简单点来说就是让你使用前端技术(css、js、html)就可以开发桌面应用(mac,windows,linux),但是使用纯html来写桌面应用,简单的毫无问题,但是复杂的项目那简直为让人生不如死。所以肯定要选择前端框架来提高开发效率。但是对于一个小白来说一下子跨越着实有点大,所以就准备写个文章,记录一下纯小白在使用electron的过程中遇到的坑。当然这里会结合ts来开发应用,毕竟js在开发后期确实有些不方便,谁用谁知道。

大名鼎鼎的vs code也是用electron开发的,这点确实让我很惊讶。electron技术起源于atom,一款由github开源的编辑器,当时第一次接触atom时,IDE实在是卡到爆,也不知道是不是我当时电脑该换了,反正给我的映像就是非常吃内存。而vscode则带给我另一种体验,让我完全无法想象使用electron开发的。

为什么不使用electron-vue搭建项目

在开发第一个electron项目我使用的是electron-vue插件创建项目的,虽然很好用,但是github上的活跃度给我的感觉却不是很好,已经很久没有更新了,所以在后期时候能更上vue的版本,是一个很麻烦的问题。还有一个就是electron-vue会把原来比较熟悉的vue项目结构打乱,弄得本来就是小白的我搞得非常不习惯,最后想了想还是自己改造一个吧!
参考教程:手把手教你使用Electron5+vue-cli3开发跨平台桌面应用

安装

vue项目要想使用electron,不要直接使用npm、yarn等安装命令,建议使用官方的命令,如下:

vue add electron-builder

第一个坑,切换electron版本后,运行项目会出现大量以下错误信息,虽然不影响运行,但是编译的时候会报错,出现这个的原因主要是node的版本有问题,这个时候需要切换项目中的node版本,使用npm或者yarn命令添加@types/node依赖,并且将版本修改13以下,原版解决方案移步这里,为了防止issue被删除,这里备份以下。
Cannot extend an interface 'NodeJS.EventEmitter'. Did you mean 'implements'?

Same issue for me when using instructions from : https://www.electronforge.io/templates/typescript-template
I was able to work around this for now by doing the follow in the initialized directory:
npm install @types/node --save
then editing package.json changing
"dependencies": { "@types/node": "^13.1.4", "electron-squirrel-startup": "^1.0.0" }
to
"dependencies": { "@types/node": "12.12.6", "electron-squirrel-startup": "^1.0.0" }
and finally running
npm install && npm start