小册上新｜Electron + Vue 3 桌面应用开发

相对于移动应用来说，桌面应用优势非常明显，比如，更大的可视区域、更快捷多样的输入输出接口、更强劲的性能支持硬件等，正在向着更专业、更精细的方向发展。最近几年众多大厂也开始重新重视这个领域，相继推出了各自的桌面应用研发框架，比如，微软的 MAUI 和 WebView2、谷歌的 Flutter-Desktop、JetBrains 的 Compose Multiplatform 、GitHub 的 Electron 等。

所以，可以预见，掌握 PC 端开发的技能还是非常有必要的。特别是现在前端从业者人数众多，导致“内卷”现象严重，掌握一项不同领域的技能可以让前端工程师成功“破圈”，避免“内卷”。

为什么选择 Electron？

如果想开发一个桌面 GUI 应用软件，希望其能同时在 Windows、Linux 和 Mac 平台上运行，可选的技术框架并不多，在早期人们主要用 wxWidgets、GTK 或 Qt 来做这类工作。这三个框架都是以 C/C++ 语言开发，受语言开发效率的限制，开发者想通过它们快速完成桌面应用的开发工作十分困难。

Electron 框架出现后，传统桌面应用开发的难点，现在看来也变得异常容易，且开发效率更高。比如，简单界面绘图可以使用 HTML 的 SVG 或 Canvas 技术实现，简单动效就可以用 CSS Animations 或 Web Animations API 来实现，复杂的动效、图形处理、音视频处理等可以借助 Node.js 的原生 C++ 模块实现。

为了弥补 Node.js 和前端技术访问系统 API 方面的不足，Electron 还对系统 API 做了封装，比如：系统对话框、系统托盘、系统菜单、剪切板等。开发者基于 Electron 开发应用时，可以直接使用 JavaScript 访问这些 API。其他诸如网络访问控制、本地文件系统的访问控制则由 Node.js 提供支持。

当然，Electron 也并不是没有竞品的，比如 NW.js，但 NW.js 与 Electron 相比，在稳定性、周边工具完善度、社区活跃程度上都相差非常大。

可以说，Electron 各项技术成熟稳定、周边生态完善，把前端工程师进入这个领域的门槛降到足够低。

又为什么选择 Vue 和 Vite 来开发界面？

前端开发者常用的开发框架主要是 Vue 和 React，这两个框架可以说各有所长，从第三方对比测试报告来看，Vue 在性能、内存占用等方面稍好于 React，并且某种程度上 Vue 在开发模式、API 设计、语法等方面也更容易使用，再加上国内 Vue 开发社区也非常繁荣，所以，本小册前端开发框架选择了 Vue。

目前主流的现代前端框架都使用 Webpack 作为构建工具，Webpack 非常强大、稳定且可定制性非常高，Vue 2.x 也使用 Webpack 作为构建工具。自 Vue 3.0 起，Vue 的作者尤雨溪就为开发者提供了一个不同构建工具：Vite ，以另一种更现代化、更高效的技术方案实现了 Webpack 的大部分功能。

它与 Webpack 的主要区别在于，使用 Vite 构建的开发环境，在开发过程中不存在捆绑（bundle）过程。源代码中的 import 语句会直接以 script module 的形式提供给浏览器，Vite 内置的开发服务（基于 koa）会拦截模块请求并在必要时执行代码转换。例如，页面渲染一个名为 component.vue 的文件时，Vite 内置的开发服务会接到页面的请求，然后动态编译这个 component.vue 文件，再把编译结果响应给页面。

这就带来了以下几个好处。

• 由于不需要做捆绑工作，服务器冷启动速度非常快。

• 代码是按需编译的，因此只编译当前界面上实际导入的代码。你不必等到整个应用被捆绑后才开始开发，这对于拥有非常多界面的应用来说是一个巨大的性能提升。

• 热更新（HMR）的性能与模块数量无关。这使得 HMR 始终快速，无论你的应用程序有多大。

另外，Vite 默认使用 esbuild 作为内置的编译器，esbuild 在将 TypeScript 转换为 JavaScript 的工作上性能表现优异，比常用的 tsc 工具快 20~30 倍，HMR 更新可以在 50ms 内反映在浏览器中。

以上就是我们选择 Vue 和 Vite 来开发界面的原因。

小册怎么设置

我们本小册只有一个主旨：带领你学会如何使用 Vite 开发一个基于 Vue 和 Electron 的桌面应用。

为方便你理解，梳理出来了如下的思维导图：

可以看到，涉及了多个不同的领域，所以这里简单梳理一下这些知识，让你在深入之前先有个初步的认识。

• 首先，如何开发 Vite 插件。开发一个普通的 Vue 项目是不需要开发者掌握 Vite 插件开发知识的，因为 Vite 的作者已经帮我们把相关的插件都开发好了，我们只要按照默认的配置开发项目即可，但开发 Electron 项目则不然，我们要自己开发 Vite 插件用于开发环境的构建和编译打包 Electron 应用。

• 其次，如何把 Vue 整合到 Electron 应用中。在这部分内容中，我们会介绍如何在 Electron 应用中使用vue-router、pinia 等库，以及如何使用前端技能管控应用的窗口等知识。

• 接着，如何使用 客户端 数据库 SQLite。在这部分内容中，我们会继续讲解把 SQLite 整合到 Electron 应用中的知识，以及关系型数据库的基础知识等。

• 最后，开发 Electron 桌面应用的其他必备知识。在这部分内容中，我们会介绍：如何开发、编译 Electron 的原生模块，如何分析、调试一个生产环境下的 Electron 应用，以及如何升级 Electron 应用等知识。

作者是谁

刘晓伦liulun，资深桌面端开发工程师。目前在一家大型国有控股上市公司任职，主要负责桌面端产品的核心技术研发、重难点技术攻关，以及新技术的预研和技术储备工作，拥有十几年的软件开发经验，在 Electron、 Qt、 CEF 等领域都有较深的知识积累。

现已出版两本与桌面端编程相关的技术图书： 《 Electron 实战：入门、进阶与性能优化》 和 《深入浅出 Electron：原理、工程与实践》 。

适宜人群

本小册旨在带领大家学习如何优雅地使用 Electron 框架与 Vue 3 框架开发桌面应用，并不是系统性介绍 Electron 或 Vue3 基础知识的小册。所以，小册对读者有一定的要求：

• 有一定基础的前端开发者（掌握基础的 Vue.js 开发知识）；

• 学习过 Electron 基础知识的开发者。

最低价：上新特惠，限时 6 折中

目前来说，Electron 的开发体验应该是最好的了，学习成本低、开发效率高、周边生态完善、各项技术成熟稳定，各种优点不一而足。我们这本小册的目标就是带领大家轻松进入桌面开发领域，让大家可以使用自己掌握的前端技能开发出优秀的桌面应用。

如果你对这个领域感兴趣，想尝试一下使用 Electron 开发桌面应用的体验，那么还等什么？赶快一起加入学习吧，相信你定会不虚此行的。

10 月 26 日～11 月 2 日，上新限时 6 折，原价 ¥29.9，算下来仅需 ¥17.94，现在购买最省钱。

赶紧点击下方图片或者扫描海报二维码，一起加入学习吧！