写在前面
已经有了那么多的 Electron 项目模板,为什么还要再造一个?是重复造轮子吗?
我相信大多数人选择使用 Electron 开发客户端时,或多或少都看上了 Web 开发的高效率,但Web开发人员在客户端和系统编程方面的经验相对缺乏,又加上 Electron 和前端框架(如 Vue )结合起来也不是那么的轻而易举,开发人员大多会选择基于模板来快速上手搭建Electron项目。
目前,Electron 的模板项目已经有很多,比较流行的有electron-vite、electron-vite-vue等。在这些模板中,有的功能过于完善,代码太复杂,远远超过了很多 Electron 客户端项目本身的代码量,需要花很多时间来熟悉模板,不适合新手快速上手和修改,一旦出现问题也难以维护;有的模板又年久失修,使用的技术早已被淘汰,也不适合用来开发线上产品,而且这些模板都有一个通病,都是在用Web开发的思维来开发客户端。
基于上述原因,我开发了这个 Electron 项目模板,在开发过程中,我一直遵循稳定、易于维护的初衷。
项目地址:
https://github.com/winsoft666/electron-vue3-boilerplate
项目介绍
基于Vue3 + Electron + TypeScript的客户端程序模板,使用Vite和Electron Forge构建和打包。
真正做到开箱即用,面向跨平台客户端设计,产品级的项目模板。
特性
- 使用 ViteJS 构建和驱动前端页面,支持热加载(HMR),使开发和调试变得更加高效 ⚡
- 支持Electron窗口创建指令,并且可隔离不同窗口的IPC事件 💖
- 封装简化了IPC的调用方式,并提供了IPC函数快速创建指令,主进程与渲染进程的相互调用从未如此简单 👍
- 主进程和渲染进程支持热加载 ⚡
- 精选依赖包,提升项目稳定性
- 代码简洁,易掌控,可定制性强
- 日志文件,主进程和渲染进程可以直接写文件日志
- 配置文件
- 主进程和渲染进程均支持axios HTTP请求
- 文件下载(含哈希校验、进度反馈),渲染进程可直接异步调用 👍
- 功能完善的无边框窗口
- 托盘图标和右键菜单,窗口关闭时程序最小化到托盘
- 客户端程序单实例
- 基于ESLint的代码规范和自动格式化
- 使用Electron官方推荐的Electron Forge进行客户端构建和打包
- 支持NSIS安装包 😎
- ……
快速开始 🌈
点击右上角绿色的 Use this template 按钮,使用该模板创建一个新的仓库并克隆到本地。
或者..
直接克隆该项目:
1 | git clone https://github.com/winsoft666/electron-vue3-boilerplate.git |
Visual Studio Code
推荐使用Visual Studio Code
进行项目开发,并安装如下插件:
- ESLint
- Vue Language Features (Volar)
安装依赖 ⏬
1 | yarn install |
开发 ⚒️
1 | yarn run dev |
其他命令
1 | yarn run dev # 启动应用并支持热加载 |
更多的可选配置项可以参考 Electron Forge CLI docs。
更多介绍可以访问项目主页:
https://github.com/winsoft666/electron-vue3-boilerplate
限于政策原因,在您看到该文章时,博客可能已经关闭了评论功能🥺
您可以通过在 blog-comment 项目中提交Issue来间接地发表评论🍀