Vue 3 桌面应用开发（文末附视频）

在正式开始之前，我想先直接“输出”一些背景信息，既能阐明我的观点，也希望可以坚定你学习本小册的决心。

首先，桌面应用开发在未来一定会大放异彩，桌面应用相对于移动应用来说优势非常明显（交互区域更大、性能更好、输入输出设备更好），微软、谷歌等大厂都开始重新重视这个领域，并投入了大量人力物力研发基础框架。

其次，Electron 等框架把前端工程师进入这个领域的门槛降到足够低，且社区活跃，生态繁荣，优秀产品数不胜数，前端工程师可以从容使用自己熟悉的技能开发出优秀的桌面应用产品。

再次，由于前端从业者人数众多，导致“内卷”现象严重，掌握一项不同领域的技能可以让前端工程师成功“破圈”，避免“内卷”。

我们这本小册的目标就是带领大家轻松进入桌面开发领域的，让大家可以使用自己掌握的前端技能开发出优秀的桌面应用。

为什么要学习桌面应用开发？

其实，关于这个问题，我在《CEF 桌面软件开发实战》那本小册中已经详细分析过了。这里我就简单梳理和补充一些要点。

虽然桌面应用在便携性方面不如移动端，但不得不说 PC 端应用拥有它自己独特的优势，比如，更大的可视区域、更快捷多样的输入输出接口、更强劲的性能支持硬件等，现在 PC 端正在向着更专业、更精细的方向发展。而移动端应用则更偏向社交和娱乐属性。

可能有人会觉得桌面应用市场并不是被移动端蚕食的，而是被 Web 应用蚕食的，确实有这方面的原因，但仔细观察你就会发现：通过浏览器为用户提供服务太被动了，用户主动来找你，你才可以为他提供服务；用户不找你，你就没有机会，也没有能力为用户提供服务。但，这是浏览器的本质，任谁也改变不了，要想解决这个问题，办法只有一个，那就是：自己提供本地桌面应用。

目前众多大厂也开始重新审视桌面应用的重要性，相继推出了各自的桌面应用研发框架，比如，微软的 MAUI 和 WebView2、谷歌的 Flutter-Desktop、JetBrains 的 Compose Multiplatform、GitHub 的 Electron 等，这些桌面端软件开发框架都是近几年才推出的，由此可见桌面应用开发领域将再次繁荣。

综上分析，掌握 PC 端开发的技能是非常有必要、非常有前景的。

为什么选择 Electron 开发桌面应用？

Electron 内部封装了 Chromium 浏览器核心和 Node.js，而且还为开发者暴露出了很多必要的操作系统 API，有了它，前端开发者就可以使用前端开发技术来开发桌面应用了。（关于基于浏览器核心的桌面应用开发框架在技术上的优势，也请参见这篇文章，这里我们就不再赘述了。）

我们知道前端技术是现如今软件开发领域应用最广泛的技术之一，且入门门槛非常低、生态繁荣、社区活跃，相对于使用 C/C++ 开发桌面软件来说，使用 Electron 开发桌面应用更容易上手，且开发效率更高。

使用 C/C++ 语言开发桌面应用有很多与开发效率有关的问题，比如：C++ 没有垃圾回收机制，开发人员要小心翼翼地控制内存，以免造成内存泄露；C++ 语言特性繁多且复杂，学习难度曲线陡峭，需要针对不同平台进行编译，应用分发困难等。而使用 Electron 开发桌面应用则不用担心这些问题。

有些人可能会担心前端技术执行效率会比 C/C++ 差，不可否认确实会有性能上的差距，但如果前端代码写得足够优秀，是完全可以做到与 C++ 应用相媲美的用户体验，Visual Studio Code 就是先例。再加上，Node.js 本身也可以很方便地调用 C++ 扩展，Electron 应用内又包含 Node.js 环境，对于一些音视频编解码或图形图像处理需求，也可以使用 Node.js 的 C++ 扩展来完成。

由于 Electron 内置了 Chromium 浏览器，该浏览器对各项前端标准都支持得非常好，甚至有些标准尚未通过，Chromium 浏览器就已经支持了，所以基于 Electron 开发应用不会遇到浏览器兼容性问题。开发者的自由度得到了最大程度的保护，你几乎可以在 Electron 中使用所有 HTML5、CSS3 、ES6 标准中定义的 API。

除此之外，Electron 可以使用几乎所有的 Web 前端生态领域及 Node.js 生态领域的组件和技术方案。目前发布到 npmjs.com 平台上的模块已经超过 100 万个，覆盖领域广、优秀模块繁多且使用非常简单方便。

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

以上这些就是我们最终选择 Electron 开发桌面应用的原因。

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

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

但这并不是说 Vue 就比 React 好，前端技术选型时还是应该选择最适合团队和产品的框架，而不应该单单对比这几个要素就做出决策。

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

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

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

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

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

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

不过需要说明一点，在开发过程中，使用 Vite 构建的项目在整个页面重新加载的性能上可能比基于绑定的 Webpack 项目稍微慢一些，因为基于 script module 的导入方式会导致大量的网络请求。但是由于这是本地开发，所以这点损耗可以忽略不计。（已经编译的文件会被缓存在内存中，所以请求这些文件时不存在编译损耗。）

另外，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 应用等知识。

作者寄语

这十几年以来，我都在从事桌面应用开发领域的工作，也用过很多个桌面应用开发框架，可以负责任地说，Electron 是我用过的开发体验最好的桌面应用开发框架了，学习成本低、开发效率高、周边生态完善、各项技术成熟稳定，各种优点不一而足。

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

视频讲解：Electron + Vue 3 桌面应用开发 - 刘晓伦liulun - 掘金小册可快速上手的 Electron 与 Vue 3 实战指南。「Electron + Vue 3 桌面应用开发」由刘晓伦liulun撰写，1253人购买https://s.juejin.cn/ds/kmKu8wh/