【Electron开发】开发、打包流程

一、引言

最近用Electron + Vue.js写了一个小工具——事项提醒小工具⏰。这篇文章总结一下Electron结合Vue.js开发、打包流程🎯。

二、流程

整个项目开发流程是这样的

• Electron、Vue.js相关环境搭建
• 使用Vue.js进行开发
• 使用Electron进行开发
• 项目打包
• 项目发布

三、Electron、Vue.js相关环境搭建

环境如下

• Node.js
• Vue-cli

在利用Vue-cli脚手架创建好项目之后，cd到项目根目录执行如下命令安装Electron：vue add vue-cli-plugin-electron-builder

注：由于网络原因，如果中间出现过中断失败，再次重新安装可能会很快完成，但实际上electron可能并未安装完全。建议完成以上步骤后，直接删除项目根目录的node_modules/，并且执行cnpm install，从国内镜像重新安装所有依赖包。
cnpm可以根据npm install -g cnpm --registry=https://registry.npm.taobao.org命令下载

检查环境是否搭建完成❔
在项目根目录的命令行中，执行npm run electron:serve，如果出现以下界面，即搭建完成✅。

这个界面实际上也是一个网页，只不过Electron框架用一个窗口的形式显示了这个网页。

四、使用Vue.js进行开发

这个就自行开发啦~

开发的时候，多封装一些通用组件、函数啥的，方便以后使用。封装组件也是有原则和规范的，具体可以看这篇文章🔗封装Vue组件的原则及技巧。

五、使用Electron进行开发

Electron框架可以实现很多功能，我这里暂时只写一些我用到的。

前面说了，Electron框架用一个窗口显示的网页。那么这个窗口可以自定义吗？答案是可以滴~🎃

执行了vue add vue-cli-plugin-electron-builder命令后，在src/目录下可以看到生成了一个background.js文件。在这个文件中可以自定一些功能，比如：

• 窗口样式：窗口样式可以改成透明的，比如这样
  

• 自定义系统托盘：比如可以改成这样
  

• 自定义主进程（IpcMain）、渲染进程（IpcRenderer）监听事件

• …

Electron框架还有很多api，具体可以参考Electron api官方文档。

六、项目打包

等你项目开发完了，隔你十万八千里的朋友说也想用一下🙋（无中生有doge），怎么办呢？

这个时候就要利用项目打包工具electron-builder了（其实还有一些其他的工具，具体可参考Electron官方文档——项目应用部署）

在终端执行npm run electron: build即可。如果打包成个，终端会显示Build complete!

在项目根目录dist_electron中会产生一个exe文件

把它发给你的朋友进行安装，你的朋友就可以使用啦~

七、项目发布

待完成…