云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

从0开始搭建桌面应用,基于Electron+Vue3+Typescript+Webpack

jxf315 2025-08-26 18:12:05 教程文章 1 ℃

背景

团队内部有个项目需要开发一个桌面应用,对于前端开发来说,桌面应用开发首选electron,自己以前调研过electron这个桌面应用框架,但是没有实际项目经验。这次有机会参与这个创新项目,希望在完成基本工作任务的同时,能够对相关过程进行一些总结和反思。

Electron简介

Electron 是一个流行的开源框架,用于构建跨平台的桌面应用程序。它最初由赵成和GitHub的工程师于2013年4月创建,当时名字为Atom Shell,用来服务于GitHub的开发工具Atom,2014年5月开源,2015年4月才正式更名为Electron。Electron 允许开发者使用网页技术——包括 HTML、CSS 和 JavaScript ——来创建原生感觉的桌面应用。Electron 结合了 Chromium(用于提供网页内容的渲染能力和一个浏览器环境)和 Node.js(提供后端 JavaScript 运行时环境,允许访问文件系统、网络和其他操作系统功能),使得开发者能够利用单一的 JavaScript 代码库来同时为目标不同的操作系统(如 Windows、macOS 和 Linux)开发应用。

Electron 的优势在于它的跨平台能力,以及让前端开发者能够利用已有的Web技术栈快速进入桌面应用开发领域。这降低了桌面应用的开发门槛,使得许多知名的桌面应用程序,比如 GitHub 的 Atom 编辑器、Microsoft 的 Visual Studio Code、Slack、WhatsApp Desktop 和许多其他应用,都是基于 Electron 构建的。

简而言之,Electron 是一个强大且灵活的工具,它改变了桌面应用的开发范式,促进了Web技术在更广泛软件开发中的应用。

搭建开发环境

保证自己的电脑上有Node.js环境和依赖包管理工具yarn(或者npm)。

团队内部前端开发的技术栈是VUE,因此我们需要将Electron和Vue结合在一块进行开发。经过调研,我们最终选用了更新比较活跃的Vue CLI Plugin Electrion Builder这个桌面应用脚手架工具进行项目初始化。

创建Vue项目之前我们需要先安装Vue CLI,如果已安装Vue CLI可忽略。

yarn global add @vue/cli

使用Vue CLI创建一个Vue项目,命令行指令如下:

vue create creator_desktop_app

按提示选择你需要的配置项,我们选择了BabelTypeScript, Router, Vuex, CSS Pre-processors, Vue3, Stylus, ESLint。示例如下:

在配置中,我们选择hash模式作为Router的运行机制,不需要特殊的服务器配置,适合桌面应用。我们选择了Stylus预处理器,它可以使我们更快、更优雅地编写前端样式代码。

接下来我们安装Vue插件electron-builder(也就是Vue CLI Plugin Electron Builder), 安装指令如下:

vue add electron-builder

环境要求node.js版本不超过17,如超过17会有错误提示。安装过程中会提示你选择electron的版本, 选择最新版本即可。当然这里的electron最新版本只有13+,而现在的electron版本已达到30+,为了保证我们以后编写的业务代码更加稳定,最好在项目搭建初期就直接将electron版本升级到最新的稳定版本。升级方法只需要重新单独安装一下最新版的Electron就可以。

安装完成后通过如下指令启动程序:

yarn electron:serve

运行后会抱如下错误:

这是自动注入的TS代码缺少对捕获的错误参数e的类型判断,需要加上对错误参数e的类型判断,如下图:

加上后继续运行可能仍然会有如下错误:

这是因为node.js的版本是17+,为了保证万无一失,再将node.js的版本降级到16就可以正常执行了。运行后可以正常执行业务代码了,但是仍然会有如下报错:

这是因为自带的ts-loader版本太高导致与现有的架构不兼容的问题,需要降级到8.4.0。

yarn add ts-loader@8.4.0 --dev

版本降级完成后通过如下指令启动程序:

yarn electron:serve

项目启动成功,如下图所示:


本文为原创内容,若转载请注明出处,转发感激不尽。

最近发表
标签列表