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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

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

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

其次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 应用等知识。