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 / Yes

Scaffolding 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/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

查询数据库的编码集Oracle,MySQL

1、查询数据库的编码集Oracle,MySQL 1.1、oracle select * from v$nls_parameters where parameterNLS_CHARACTERSET; 查询版本&#xff1a;SELECT * FROM v$version 2、MySQL编码集 SELECT DEFAULT_CHARACTER_SET_NAME, DEFAULT_COLLATION_NAME FROM information_schema.SC…

隐私也要付费?Meta公司为收集用户数据再出“奇招”

Cybernews网站消息&#xff0c;有相关人士表示&#xff0c;如果欧洲数据保护委员会&#xff08;EDPB&#xff09;不明确指出Meta公司的“付费或同意”的模式违反了欧盟的隐私法规&#xff0c;那么这一模式很可能会被大规模复制&#xff0c;危及数百万欧洲公民的自由选择权。 自…

Jenkins2.426邮件通知配置

之前安装的jenkins出现问题了&#xff0c;重新装了jenkins&#xff0c;需要重新配置&#xff1a;Maven&#xff0c;JDK&#xff0c;Allure报告&#xff0c;邮件通知&#xff0c;Extended E-mail Notification等 配置Maven&#xff0c;JDK参考&#xff1a;CICD集合(四):Jenkins…

排序第三篇 直接插入排序

插入排序的基本思想是&#xff1a; 每次将一个待排序的记录按其关键字的大小插入到前面已排好序的文件中的适当位置&#xff0c; 直到全部记录插入完为止。 一 简介 插入排序可分为2类 本文介绍 直接插入排序 它的基本操作是&#xff1a; 假设待排充序的记录存储在数组 R[1……

2.22 Qt day3 多界面跳转+qss登录界面优化+发布软件+对话框

思维导图&#xff1a; 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号…

我们在SqlSugar开发框架中,用到的一些设计模式

我们在《SqlSugar开发框架》中&#xff0c;有时候都会根据一些需要引入一些设计模式&#xff0c;主要的目的是为了解决问题提供便利和代码重用等目的。而不是为用而用&#xff0c;我们的目的是解决问题&#xff0c;并在一定的场景下以水到渠成的方式处理。不过引入任何的设计模…

【教3妹学编程-算法题】匹配模式数组的子数组数目 I

3妹&#xff1a;2哥2哥&#xff0c;你有没有看到上海女老师出轨男学生的瓜啊。 2哥 : 看到 了&#xff0c;真的是太毁三观了&#xff01; 3妹&#xff1a;是啊&#xff0c; 老师本是教书育人的职业&#xff0c;明确规定不能和学生谈恋爱啊&#xff0c;更何况是出轨。 2哥 : 是啊…

HarmonyOS—LocalStorage:页面级UI状态存储

LocalStorage是页面级的UI状态存储&#xff0c;通过Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内&#xff0c;在页面间共享状态。 本文仅介绍LocalStorage使用场景和相关的装饰器&#xff1a;LocalStorageProp和LocalS…

大保司保费贵,是否物有所值?

《大保司保费贵&#xff0c;是否物有所值》 这是罗师兄的原创文章 预计8-9分钟读完 作者&#xff1a;罗师兄 微信号&#xff1a;luoyun515 当我们想要买一份重疾险、储蓄险等长期险时&#xff0c; 我们会发现&#xff0c;同样的保障责任和保额&#xff0c; 不同保险公司的…

mac苹果电脑系统最好用的清理软件CleanMyMac2024功能介绍及如何激活解锁许可证

CleanMyMac X的界面设计简洁大气&#xff0c;为用户提供了直观且易于操作的使用体验。 布局清晰&#xff1a;界面布局非常明朗&#xff0c;左侧是功能栏&#xff0c;右侧则是信息界面。这种布局方式使得用户能够迅速找到所需的功能选项&#xff0c;提高了操作效率。色彩搭配&a…

Flutter常用命令,持续更新

目录 前言 Flutter 常用命令 Dart 常用命令 adb 常用命令&#xff08;用于 Android 开发&#xff09; 前言 当在开发Flutter项目时&#xff0c;熟悉一些常用的命令是非常重要的。这些命令可以帮助你执行各种任务&#xff0c;从构建应用程序到调试和测试。以下是一些Flutte…

亿道丨三防平板丨加固平板丨三防加固平板丨改善资产管理

库存资产管理中最重要的部分之一是准确性&#xff1b;过时的库存管理技术会增加运输过程中人为错误、物品丢失或纸张损坏的风险。如今随着三防平板电脑的广泛使用&#xff0c;库存管理也迎来了好帮手&#xff0c;通过使用三防平板电脑能够确保库存管理、数据存储和记录保存的准…

Hive【内部表、外部表、临时表、分区表、分桶表】【总结】

目录 Hive的物种表结构特性 一、内部表 建表 使用场景 二、外部表 建表:关键词【EXTERNAL】 场景&#xff1a; 外部表与内部表可互相转换 三、临时表 建表 临时表横向对比​编辑 四、分区表 建表&#xff1a;关键字【PARTITIONED BY】 场景&#xff1a; 五、分桶表 …

pip安装依赖环境出现的问题

一、error: subprocess-exited-with-error! 1、前期一直百度的错误如标题所示&#xff0c;得到的方案如下&#xff1a;&#xff08;但没解决问题&#xff09; &#xff08;1&#xff09;升级setuptools库&#xff0c;或者降低固定版本 //升级setuptools库&#xff0c;或者降低…

Spark之【基础介绍】

Spark最初是由美国伯克利大学AMP实验室在2009年开发&#xff0c;Spark时基于内存计算的大数据并行计算框架&#xff0c;可以用于构建大型的、低延迟的数据分析应用程序。 Spark是当今大数据领域最活跃、最热门、最高效的大数据通用计算平台之一。 Spark的特点 运行速度快 &am…

L2 清点代码库----PTA(疑问)

上图转自新浪微博&#xff1a;“阿里代码库有几亿行代码&#xff0c;但其中有很多功能重复的代码&#xff0c;比如单单快排就被重写了几百遍。请设计一个程序&#xff0c;能够将代码库中所有功能重复的代码找出。各位大佬有啥想法&#xff0c;我当时就懵了&#xff0c;然后就挂…

用Python插入页码到PDF文档

页码是许多类型文件中的重要内容&#xff0c;它能方便读者在文档中的导航。在创建PDF文档时&#xff0c;添加页码对于组织和引用内容特别有用。在本文中&#xff0c;我们将探讨如何利用Python程序高效地插入页码到PDF文档中&#xff0c;简化工作流程并创建出精美、结构合理的PD…

【selenium】执行 Javascript 脚本 滚动、元素的特殊操作等

某些特殊情况下&#xff0c;使用selenium的api无法操作页面元素&#xff0c;点击、滚动实现的某些功能&#xff0c;可以考虑通过执行js来完成。 为什么不用js写自动化&#xff1f;——selenium第一版是js写的&#xff0c;但js兼容性存在问题&#xff0c;所以引入webdriver 现在…

Vue 中 onclick和@click区别

文章目录 一、直接上结论二、验证代码&#xff0c;可直接运行三、点击结果 一、直接上结论 onclick 只能触发 js的原生方法&#xff0c;不能触发vue的封装方法click 只能触发vue的封装方法&#xff0c;不能触发js的原生方法 二、验证代码&#xff0c;可直接运行 <!DOCTYP…