相对于移动应用来说，桌面应用优势非常明显，比如，
更大的可视区域、更快捷多样的输入输出接口、更强劲的性能支持硬件
等，正在向着更专业、更精细的方向发展。最近几年众多大厂也开始重新重视这个领域，相继推出了各自的桌面应用研发框架，比如，微软的 MAUI 和 WebView2、谷歌的 Flutter-Desktop、JetBrains 的 Compose Multiplatform 、GitHub 的 Electron 等。
所以，可以预见，掌握 PC 端开发的技能还是非常有必要的。特别是现在前端从业者人数众多，导致“内卷”现象严重，掌握一项不同领域的技能可以让前端工程师成功“破圈”，避免“内卷”。
如果想开发一个桌面 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 和 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 的开发体验应该是最好的了，学习成本低、开发效率高、周边生态完善、各项技术成熟稳定，各种优点不一而足。我们这本小册的目标就是带领大家轻松进入桌面开发领域，让大家可以使用自己掌握的前端技能开发出优秀的桌面应用。
如果你对这个领域感兴趣，想尝试一下使用 Electron 开发桌面应用的体验，那么还等什么？赶快一起加入学习吧，相信你定会不虚此行的。
10 月 26 日～11 月 2 日，上新限时 6 折，原价 ¥29.9，算下来仅需
¥17.94 ，现在购买最省钱。
赶紧点击
下方图片
或者
扫描海报二维码
，一起加入学习吧！
-
-
E
N
D
-
-
-
我
们
的
新
订
阅
号
正
在
持
续
活
跃
中
，
欢
迎
大
家
投
稿
和
关
注
！
