一、引言
最近用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文件
把它发给你的朋友进行安装,你的朋友就可以使用啦~
七、项目发布
待完成…