网站首页 > 教程文章 正文
背景
团队内部有个项目需要开发一个桌面应用,对于前端开发来说,桌面应用开发首选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
项目启动成功,如下图所示:
本文为原创内容,若转载请注明出处,转发感激不尽。
猜你喜欢
- 2025-08-26 前端分享-VueUse着实是有东西的_vue.use是什么
- 2025-08-26 Vue CLI相关配置_vue—cli
- 2025-08-26 【推荐】一款轻量简洁优雅的 Vue3 中后台管理模板,开源免费可商用
- 2025-08-26 vue3使用vue-i18n国际化_vue 国际化
- 2025-08-26 超惊艳 Vue3.x 组件库Na"ive UI_文笔超惊艳的高质量小说古言
- 2025-08-26 vue:组件中之间的传值_vue组件之间的传值方式
- 2025-08-26 Vue3 的 RouterView 父级和子页面数据交互
- 2025-08-26 Vue前端开发——组件篇_vue 前端组件
- 2025-08-26 超好看 vue2.x 音频播放器组件Vue-APlayer
- 2025-08-26 Vuex与SpreadJS施展“组合拳”,实现大屏展示应用的交互增强
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)