Electron实战之环境搭建

工欲善其事必先利其器,在进行实战开发的时候,我们最终的步骤是搞好一个舒服的开发环境,目前支持 Vue 的 Electron 工程化工具主要有 electron-vue、Vue CLI Plugin Electron Builder、electron-vite。

接下来我们将分别介绍基于 Vue CLI Plugin Electron Builder 和 electron-vite 的开发环境搭建。

一、vue-cli-plugin-electron-builder

vue-cli-plugin-electron-builder 是一个基于 VueCli 的插件工具,它是一个 npm 包,能够为 Vue CLI 创建的项目添加 Electron 构建的能力。

1.1 创建 VueCli 项目

创建一个基于 VueCli 的项目,需要先安装VueCli工具,命令如下:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装好 Cli工具后,我们就可以使用Cli工具创建一个 Vue 项目了,如下所示。

vue create electron-vue

此处,我们选择 Vue 3 + babel + eslint 的模式。

图片

图片

创建完成之后,目录结构如下所示。

图片

图片

1.2 安装 vue-cli-plugin-electron-builder

vue-cli-plugin-electron-builder 是一个 VueCli 插件,可以使用下面的命令进行安装。

vue add electron-builder

在安装的时候,只提供了 Electron v11、v12、v13 这 3 个版本选择,这里我们先选 v13。安装完成之后,目录结构如下所示。

图片

图片

对于Electron项目,我们需要重点关注以下几个文件:

  • package.json:这个文件通过 main 字段定义了编译后的主入口文件路径,并且通过 script 字段定义了应用程序的启动、编译等脚本程序。

  • src/background.js:这个文件就是 Electron 的主进程的入口文件,它是应用程序的入口点,负责管理整个应用的生命周期、创建窗口、原生 API 调用等。

  • src/main.js 是渲染进程的入口文件,就是我们通常写的 Vue 前端代码的入口。

1.3 目录结构优化

接下来,我们对主进程和渲染进程进行一些优化,目的是方面后期项目的扩展。我们新建了 main 和 renderer 目录,并将之前的 src/background.js 迁移到了 main 目录下,且重命名为 index.js。然后再把之前和 Vue 相关的渲染进程的文件以及文件夹全部迁移到了 renderer 目录下。

同时,目录调整后,我们需要重新修改一下 vue.config.js 的编译配置:

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,pages: {index: {entry: 'src/renderer/main.js',},},pluginOptions: {electronBuilder: {nodeIntegration: true,mainProcessFile: 'src/main/index.js',mainProcessWatch: ['src/main'],},},
})

当然,记得修改 package.json 里面的 main 配置:

{..."main": "index.js",...
}

1.4 安装electron

然后,我们安装最新的electron版本,命令如下:

yarn add electron@29.0.0 -D

版本情况:

如果安装过程中,出现下面的网络错误。

图片

图片

可以在项目中.npmrc 文件代理 Electron 的安装源,指向 taobao,如下所示。

electron_mirror=https://npmmirror.com/mirrors/electron/

安装完成后,我们运行一下启动本地服务。

npm run electron:serve

如果没有任何的错误,会看到下面的页面。

图片

图片

二、electron-vite

electron-vite 是一个新型 Electron 开发构建工具,旨在为 Electron 提供更快、更精简的开发体验,它是基于 vite 构建 Electron 应用的。我们可以使用 @quick-start/electron 工具快速创建一个 electron-vite 的应用。

npm create @quick-start/electron

然后按照提示输入对应的内容,下一步即可:

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / YesScaffolding project in ./<electron-app>...
Done.

新建完成后,electron-vite 的项目结构如下所示。

可以看到,整体目录结构还是比较规范和清晰的,我们几乎不需要进行任何调整就可以直接使用了。在我们安装好相关的依赖后,我们可以使用下面的命令运行项目。

npm run dev

最终的效果如下图。

图片

图片

三、主进程启动项目

不管是通过 vue-cli-plugin-electron-builder 创建还是通过 electron-vite 创建的项目,都需要通过唯一的主进程进行应用程序的启动。主进程的第一步操作就是监听 app ready 事件来创建窗口:

// main/index.js
app.whenReady().then(() => {createWindow()
})

接下来,我们需要通过 createWindow 函数构造一个简单的窗口。

// main/index.js
function createWindow() {const mainWindow = new BrowserWindow({width: 900,height: 670,show: false,autoHideMenuBar: true,webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}})mainWindow.on('ready-to-show', () => {mainWindow.show()})if (is.dev && process.env['ELECTRON_RENDERER_URL']) {mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])} else {mainWindow.loadFile(join(__dirname, '../renderer/index.html'))}
}

需要注意的是,我们在窗口初始化时,指定了 show: false 的参数,意味着窗口创建完成后不会立即显示。然后通过监听 mainWindow.on('ready-to-show') 的事件触发后再通过 mainWindow.show() 方法来显示窗口。
这样做是因为 Electron 中的 ready-to-show 事件表示窗口内容已经加载完成且应用程序准备好显示给用户。在等待 ready-to-show 事件触发后再调用 window.show(),可以确保用户看到的是完全加载并准备好的界面,避免了展示未完成的内容。

最后,通过监听 app.on('window-all-close') 事件,来处理非 macOS 下的所有窗口关闭后的退出整个 electron 应用。

// main/index.js
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

这和 windows 平台的操作习惯是一样的,在windows平台上,通常我们把应用的窗口都关了之后也就默认把这个应用给退出了。


参考:https://cn.electron-vite.org/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697461.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

暴雨信息|警惕AI 的变革阵痛与不稳定性

过去的未来主义幽灵使我们对数字化变革的预测保持谨慎。 我们现在经常听到&#xff0c;世界正处于一个技术转折点&#xff1b;我们正在快速步入一个由 ChatGPT 等人工智能工具塑造的未来。然而&#xff0c;我怀疑&#xff0c;2024 年我们将会被提醒到纳普斯特的幽灵——以及其他…

ChatGPT在数据分析岗位了解阶段的应用

ChatGPT在数据分析岗位了解阶段的应用 ​ 1.1 数据分析师的职责与技能要求 ​ 如果想成为数据分析师&#xff0c;首先要了解这个岗位的具体职责和技能要求。这个问题可以直接询问ChatGPT&#xff1a; ​ ChatGPT收到上述内容后&#xff0c;返回如下结果。 ​ ChatGPT给出的信…

【论文精读】Segment Anything

Segment Anything 前言Abstract1. Introduction2. Segment Anything Task3. Segment Anything Model4. Segment Anything Data Engine5. Segment Anything Dataset6. Segment Anything RAI Analysis7. Zero-Shot Transfer Experiments7.1. Zero-Shot Single Point Valid Mask E…

【开源】SpringBoot框架开发音乐平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首音乐4.2 新增音乐4.3 新增音乐订单4.4 查询音乐订单4.5 新增音乐收藏 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的音乐平台&#xff0c;包含了音乐…

【ctfshow—web】——信息搜集篇1(web1~20详解)

ctfshow—web题解 web1web2web3web4web5web6web7web8web9web10web11web12web13web14web15web16web17web18web19web20 web1 题目提示 开发注释未及时删除 那就找开发注释咯&#xff0c;可以用F12来查看&#xff0c;也可以CtrlU直接查看源代码呢 就拿到flag了 web2 题目提示 j…

第3.5章:StarRocks数据导入——Broker Load

注&#xff1a;本篇文章阐述的是StarRocks-3.2版本的Broker Load导入机制 一、概述 Broker Load导入方式支持从HDFS类的外部存储系统&#xff08;例如&#xff1a;HDFS、阿里OSS、腾讯COS、华为云OBS等&#xff09;&#xff0c;支持Parquet、ORC、CSV、及 JSON 四种文件格式&a…

vue里echarts的使用:画饼图和面积折线图

vue里echarts的使用,我们要先安装echarts,然后在main.js里引入: //命令安装echarts npm i echarts//main.js里引入挂载到原型上 import echarts from echarts Vue.prototype.$echarts = echarts最终我们实现的效果如下: 头部标题这里我们封装了一个全局公共组件common-he…

qt 软件发布(Windows)

1. 开发环境 QtCreator MSVC编译器 2. 源码编译 生成release或者debug版本的exe可执行文件(x64或x86) 3. windeployqt 打包 ①左下角开始菜单栏找到QT的命令交互对话框&#xff0c;如下图MSVC 2017 64-bit(根据第二步编译的类型选择64位或者32位)。 ②cd 切换到第二步可…

TCP/IP协议详解

文章目录 TCP/IP协议概述基于TCP/IP协议的应用工具协议协议的必要性 TCP/IP协议TCP/IP协议族协议的分层 传输方式的分类报文、帧、数据包等的区别TCP 和 UDP的区别 TCP/IP协议概述 TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;是一组通信协…

《图解HTTP》笔记2:http的构成

1&#xff0c;查看浏览器上面一个具体的http请求 浏览器地址栏输入网址&#xff1a;https://news.baidu.com/ 使用浏览器的开发者工具&#xff0c;查看网络中发送和接受的数据。 可以看到输入一个网址&#xff0c;浏览器和服务器进行了很多的交互。&#xff08;绿色部分&#…

python + selenium/appnium

Selenium 的自动化原理: selenium 自动化流程: 自动化程序调用Selenium 客户端库函数&#xff08;比如点击按钮元素&#xff09;客户端库会发送Selenium 命令 给浏览器的驱动程序浏览器驱动程序接收到命令后 ,驱动浏览器去执行命令浏览器执行命令浏览器驱动程序获取命令执行的…

OJAC近屿智能张立赛博士揭秘GPT Store:技术创新、商业模式与未来趋势

> - [Look&#xff01;&#x1f440;我们的大模型商业化落地产品](https://www.airecruitas.com/aigc) >- &#x1f4d6;更多AI资讯请&#x1f449;&#x1f3fe;[关注](https://mp.weixin.qq.com/s/85qwuIydaaydMQz2g0rgMA) >- [Free三天集训营助教在线为您火热答疑…

多任务爬虫(多线程和多进程)

在一台计算机中&#xff0c;我们可以同时打开多个软件&#xff0c;例如同时浏览网页、听音乐、打字等&#xff0c;这是再正常不过的事情。但仔细想想&#xff0c;为什么计算机可以同时运行这么多软件呢? 这就涉及计算机中的两个名词&#xff1a;多进程和多线程。 同样&#xf…

通信入门系列——锁相环、平方环、Costas环

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、锁相环 1、压控振荡…

使用k-近邻算法改进约会网站的配对效果(kNN)

目录 谷歌笔记本&#xff08;可选&#xff09; 准备数据&#xff1a;从文本文件中解析数据 编写算法&#xff1a;编写kNN算法 分析数据&#xff1a;使用Matplotlib创建散点图 准备数据&#xff1a;归一化数值 测试算法&#xff1a;作为完整程序验证分类器 使用算法&…

SpringCloud(14)之SpringCloud Consul

我们知道 Eureka 2.X 遇到困难停止开发了&#xff0c;所以我们需要寻找其他的替代技术替代Eureka&#xff0c;这一小 节我们就讲解一个新的组件Consul。 一、Consul介绍 Consul 是 HashiCorp 公司推出的开源工具&#xff0c;用于实现分布式系统的服务发现与配置。与其它分布式…

kali xrdp

Kali Linux 使用远程桌面连接——xrdp&xfce_kali xfce桌面-CSDN博客 Ubuntu/Debian/Kali xrdp远程桌面黑屏/空屏/无画面解决办法 - 知乎 (zhihu.com) sudo apt-get install xrdp -y sudo apt-get install xfce4 -ysudo systemctl enable xrdp --now systemctl status xrd…

【Latex】TeXstudio编译器选项修改

1、动机 编译国科大博士毕业答辩论文latex时报错 Package ctable Error: You must load ctable after tikz. 2、方法 经过搜索发现是因为这是中文模板&#xff0c;编译的选项不对&#xff0c;需要从 PDFLaTeX 调整到 XeLaTeX。于是操作如下 1&#xff09;点击选项 2&#xf…

Flask——基于python完整实现客户端和服务器后端流式请求及响应

文章目录 本地客户端Flask服务器后端客户端/服务器端流式接收[打字机]效果 看了很多相关博客&#xff0c;但是都没有本地客户端和服务器后端的完整代码示例&#xff0c;有的也只说了如何流式获取后端结果&#xff0c;基本没有讲两端如何同时实现流式输入输出&#xff0c;特此整…

8.CSS层叠继承规则总结

CSS 层叠继承规则总结 经典真题 请简述一下 CSS 中的层叠规则 CSS 中的层叠继承规则 在前面《CSS属性的计算过程》中&#xff0c;我们介绍了每一个元素都有都有所有的属性&#xff0c;每一个属性都会通过一系列的计算过程得到最终的值。 这里来回顾一下计算过程&#xff0…