当前位置: 首页 > news >正文

electron项目搭建

前言:electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器,一个渲染页面另一个处理electron窗口内容)。这两个"服务器"之间通过JS Bridge进行通信(即:contextBridge),在主进程的preload预加载中可以同时访问到浏览器进程的window对象和主进程的electron api。此时,我们可以经由ipcRerender(electron中从渲染进程(网页)向主进程发送同步和异步消息的api)将electron的api挂载到window对象上,以便在浏览器进程中使用),然后在主进程中通过ipcMain(处理从渲染器进程(网页)发送的异步和同步消息。从渲染器发送的消息将被发送到该模块。)监听即可达到进程通信的目的。

本文章主要介绍如何基于vite搭建electron项目

首先创建文件夹并cd到此文件夹中初始化

npm init -y

然后安装vite环境

npm i vite -D

安装electron(推荐cnpm安装,npm安装有可能会卡住,或者你自己更换镜像地址也行)

cnpm install --save-dev electron

安装electron打包工具

cnpm install  electron-builder -D

接下来安装你想用的框架及配套内容(本文使用的是vue3)

npm i vue vue-router pinia axios less less-loader -s

安装vue的构建工具

npm i @vitejs/plugin-vue -D

现在我们开始配置文件内容

因为是基于vite搭建的项目,故此需要再根目录新建vite.config.mjs(为啥用mjs稍后会解释)文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron  from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'
import { resolve } from 'path'export default defineConfig({//项目路径配置base:'./',plugins:[//vue解析插件vue(),electron({//electron项目入口entry:'./electron/index.js',vite:{build:{//打包目录名outDir:'dist'}}}),//渲染进程入口 renderer({entry:'./src/main.js',nodeIntegration: true,})],//允许跨域server:{cors:true},resolve:{"alias":{"@":resolve(__dirname,'./src')}}
})

package.json文件配置

{"name": "electron","version": "1.0.0",//"type":"module",/*  electron项目不推荐"type":"module"故此我们这里就不使用"type":"module"选项,启动项目时控制台会提醒The CJS build of Vite's Node API is deprecatedvite已弃用cjs进行构建,我们可以修改vite.config.js为vite.config.mjs*///入口文件"main": "electron/index.js","scripts": {//启动项目 "dev": "vite",//打包成windows应用/* --config electron-builder.json 指根据electron-builder.json配置文件打包,所以需要在根 目录下新建electron-builder.json文件配置打包信息*/"build": "vite build && electron-builder build --win --x64 --config electron- builder.json",//打包成mac应用(注:打包mac应用需要再mac系统中才能打包)"build:mac":"vite build && electron-builder build --mac --arm64 --config electron- builder.json",//打包成linux应用"build:linux":"vite build && electron-builder build --linux --armv7l --config electron-builder.json"},"keywords": ["electron","vue","pinia"],"description":"vite-electron","author": "仙古梦回","license": "ISC","devDependencies": {"@vitejs/plugin-vue": "^5.1.0","electron": "^31.2.1","electron-builder": "^24.13.3","less": "^4.2.0","less-loader": "^12.2.0","vite": "^5.3.4","vite-plugin-electron": "^0.28.7","vite-plugin-electron-renderer": "^0.14.5"},"dependencies": {"@vitejs/plugin-vue": "^5.1.0","pinia": "^2.1.7","vue": "^3.4.33","vue-router": "^4.4.0"}
}

electron-builder.json文件配置

{"productName": "仙古梦回","files": ["./electron/index.js", "./dist"],"extraFiles": ["./videos", "./cvideo"], "directories": {"output": "./dist"}}

现在我们开始构建主进程文件,在根目录新建electron文件夹并新建index.js

const { app,BrowserWindow,ipcMain } =  require('electron')
const path  = require('path')const createWindow = ()=>{const win = new BrowserWindow({width:1100,height:700,webPreferences:{nodeIntegration:true, // 禁用 nodeIntegrationcontextIsolation: true, // 启用上下文隔离 preload:path.join(__dirname,'./preload.js')}})//关闭菜单win.setMenu(null)/*环境变量process.env.VITE_DEV_SERVER_URL,用于获取当前项目的启动地址。 示例:http://localhost:5173*/if(process.env.VITE_DEV_SERVER_URL){win.loadURL(process.env.VITE_DEV_SERVER_URL)}else{win.loadFile(path.join(__dirname,'../dist/index.html'))}
}//监听渲染进程传过来的great事件
ipcMain.on('great',(event,val)=>{console.log(val)
})app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

预加载文件配置

const { contextBridge,ipcRenderer } = require('electron')//用于安全地将 API 从预加载脚本的隔离上下文公开到网站运行的上下文。该 API 也可以像以前一样从 window.myAPI 上的网站访问。
contextBridge.exposeInMainWorld('electronAPI', {//暴露到渲染进程window对象中的great事件,通过ipcRenderer.send发送给主进程great: (val) => ipcRenderer.send('great', val)
})

构建渲染进程

在根目录建立src文件夹同时在根目录创建index.html作为展示页面(上文建立主进程index.js文件时有引入这个html文件)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仙古梦回</title><!--注意这里的type="module",我们使用vue开发用的是ESmodule,同时允许跨域crossorigin --><script type="module" crossorigin src="./src/main.js" ></script>
</head>
<body><div id="app"></div>
</body>
</html>

在src文件夹下开始构建vue项目(与普通vue项目构建一样)

main.js文件

import { createApp } from "vue";import App from './App.vue'const app = createApp(App)app.mount('#app')

App.vue文件配置

<template><div><button @click="send">向主进程发送你好</button></div>
</template><script setup>const send = ()=>{window.electronAPI.great('你好123' )
}</script><style lang="less" scoped></style>

至此,一个基于vite和vue搭建的electron项目就构建完成。

项目代码地址:仙古梦回/electron的搭建

相关文章:

electron项目搭建

前言&#xff1a;electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器&#xff0c;一个渲染页面另一个处理electron窗口内容)。这两个"服务器"之间通过JS Bridge进行通信(即&…...

【CVPR2024】Efficient LoFTR: 高效的 LoFTR:具有类似稀疏的速度的半密集局部特征匹配

Efficient LoFTR: 高效的 LoFTR&#xff1a;具有类似稀疏的速度的半密集局部特征匹配 Efficient LoFTR realtime_demo 0.摘要 \qquad 我们提出了一种新的方法来有效地产生跨图像的半密集匹配。以往的无探测器匹配器LoFTR在处理大视点变化和纹理差的场景下表现出了出色的匹配能力…...

【Golang 面试 - 基础题】每日 5 题(九)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

《程序猿入职必会(4) · Vue 完成 CURD 案例 》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…...

编程技巧:如何优雅地合并两个有序数组?

目录 题目引用描述1.直接合并 排序2.指针3.后逆向双指针进阶&#xff1a;你可以设计实现一个时间复杂度为 O(m n) 的算法解决此问题吗&#xff1f;总结 题目 来自力扣 引用 合并两个有序数组 给你两个按 **非递减顺序 **排列的整数数组 nums1 和 nums2&#xff0c;另有两个整…...

Vue组件库移动端预览实现原理

引言 大家如果使用过移动端组件库&#xff08;比如&#xff1a;Vant&#xff09;&#xff0c;会发现在网站右侧有一个手机端的预览效果。 而且这个手机端预览的内容和外面的组件代码演示是同步的&#xff0c;切换组件的时候&#xff0c;移动端预览的内容也会发生相应的变化。 …...

FastAPI(七十五)实战开发《在线课程学习系统》接口开发-- 创建课程

源码见&#xff1a;"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 上次我们分享了&#xff0c;FastAPI&#xff08;七十四&#xff09;实战开发《在线课程学习系统》接口开发-- 删除留言 从本篇文章开始&#xff0c;…...

【C++】 条件变量实现线程同步示例

在做一些比较大的项目的时候&#xff0c;需要实现线程同步&#xff0c; 这里结合一个小示例&#xff0c;进行线程同步的讲解 问题定义 以下是一个使用 C 多线程和条件变量的示例&#xff0c;展示了线程 A 接收一个 enable 信号并通知线程 B 开始工作。线程 B 在开始工作之前…...

linux下载redis安装并指定配置文件启动

linux下载redis并安装启动&#xff1a; cd /usr/local/src 下载redis压缩包 wget http://download.redis.io/releases/redis-6.2.6.tar.gz 解压 tar -xzf redis-6.2.6.tar.gz 编译和安装redis make make install 安装完成后进入 redis 安装目录 cd /usr/local/bin 修改…...

线性结构、线性表、顺序表、链表、头插法、尾插法、中间插入或删除一个节点

梳理几个名词&#xff1a; 逻辑地址&#xff1a;就是说是第几个元素。 物理地址&#xff1a;也就是存储地址&#xff0c;在计算机里具体存放的位置。 线性表的存储结构分为&#xff1a; &#xff08;1&#xff09;顺序存储结构&#xff1a;将数据依次存储在连续的整块物理空…...

C# Task.WaitAll 的用法

目录 简介 1.WaitAll(Task[], Int32, CancellationToken) 2.WaitAll(Task[]) 3.WaitAll(Task[], Int32) 4.WaitAll(Task[], CancellationToken) 5.WaitAll(Task[], TimeSpan) 结束 简介 Task.WaitAll 是 C# 中用于并行编程的一个的方法&#xff0c;它属于 System.Threa…...

vue2 前端实现pdf在线预览(无插件版)

toFielDetail()是点击预览的方法&#xff0c;getOfficialFile是获取文件流的接口正常定义即可&#xff1a; export function getOfficialFile(query) {return request({url: /dataAsset/projectassess/getOfficialFile,method: get,params: query,}); } 调用接口的页面需要引用…...

排序XXXXXXXXX

信息学奥赛&#xff5c;常见排序算法总结&#xff08;C&#xff0b;&#xff09; - 腾讯云开发者社区-腾讯云 (tencent.com) https://cloud.tencent.com/developer/news/975232 常用序号层级排序 一、序号 序号Sequence Number&#xff0c;有顺序的号码&#xff0c;如数字序号…...

【文件解析漏洞】实战详解!

漏洞描述&#xff1a; 文件解析漏洞是由于中间件错误的将任意格式的文件解析成网页可执行文件&#xff0c;配合文件上传漏洞进行GetShell的漏洞! IIS解析漏洞&#xff1a; IIS6.X&#xff1a; 方式一:目录解析 在网站下建立文件夹的名字为.asp/.asa 的文件夹&#xff0c;其目…...

【杂谈】学会让你节省三秒钟——Dev-c++的缺省源

【杂谈】学会让你节省三秒钟——Dev-c的缺省源 1.前言2.缺省源的介绍3.注意 1.前言 你是否在为每次写程序都要自己手打一遍框架而感到苦恼&#xff1f;为什么大佬的Dev-C一新建文件就会自动出现程序框架&#xff1f;看完这篇文章&#xff0c;让你也能成为大佬&#xff0c;不用再…...

推荐一款前端滑动验证码插件(Vue、uniapp)

uniapp版本&#xff1a;滑块拼图验证码&#xff0c;有后端&#xff0c;简单几步即可实现&#xff0c;小程序、h5都可以用 - DCloud 插件市场 Vue版本及cdn版本可以查阅文档&#xff1a; 行为验证 | Poster 文档 示例代码&#xff1a; <template><view id"app&…...

【Git】git stash

目录 基本概念参数详解listshowsavepushpop|applydropclearbranch 参考文章 Git的stash命令是一个非常实用的功能&#xff0c;它允许开发者临时保存工作目录和暂存区的更改&#xff0c;以便能够切换到其他分支或进行其他操作&#xff0c;而不会丢失当前的修改。以下是git stash…...

不得不安利的程序员开发神器,太赞了!!

作为一名程序员&#xff0c;你是否常常为繁琐的后端服务而感到头疼&#xff1f;是否希望有一种工具可以帮你简化开发流程&#xff0c;让你专注于创意和功能开发&#xff1f;今天&#xff0c;我要向大家隆重推荐一款绝佳的开发神器——MemFire Cloud。它专为懒人开发者准备&…...

吴恩达机器学习C1W2Lab06-使用Scikit-Learn进行线性回归

前言 有一个开源的、商业上可用的机器学习工具包&#xff0c;叫做scikit-learn。这个工具包包含了你将在本课程中使用的许多算法的实现。 目标 在本实验室你可以&#xff1a; 利用scikit-learn实现基于正态方程的近似解线性回归 工具 您将使用scikit-learn中的函数以及ma…...

CSS实现表格无限轮播

<div className{styles.tableTh}><div className{styles.thItem} style{{ width: 40% }}>报警名称</div><div className{styles.thItem} style{{ width: 35% }}>开始时间</div><div className{styles.thItem} style{{ width: 25% }}>状态&…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

Mac flutter环境搭建

一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...

【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...