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项目搭建
前言:electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器,一个渲染页面另一个处理electron窗口内容)。这两个"服务器"之间通过JS Bridge进行通信(即&…...
【CVPR2024】Efficient LoFTR: 高效的 LoFTR:具有类似稀疏的速度的半密集局部特征匹配
Efficient LoFTR: 高效的 LoFTR:具有类似稀疏的速度的半密集局部特征匹配 Efficient LoFTR realtime_demo 0.摘要 \qquad 我们提出了一种新的方法来有效地产生跨图像的半密集匹配。以往的无探测器匹配器LoFTR在处理大视点变化和纹理差的场景下表现出了出色的匹配能力…...
【Golang 面试 - 基础题】每日 5 题(九)
✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…...
《程序猿入职必会(4) · Vue 完成 CURD 案例 》
📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…...
编程技巧:如何优雅地合并两个有序数组?
目录 题目引用描述1.直接合并 排序2.指针3.后逆向双指针进阶:你可以设计实现一个时间复杂度为 O(m n) 的算法解决此问题吗?总结 题目 来自力扣 引用 合并两个有序数组 给你两个按 **非递减顺序 **排列的整数数组 nums1 和 nums2,另有两个整…...
Vue组件库移动端预览实现原理
引言 大家如果使用过移动端组件库(比如:Vant),会发现在网站右侧有一个手机端的预览效果。 而且这个手机端预览的内容和外面的组件代码演示是同步的,切换组件的时候,移动端预览的内容也会发生相应的变化。 …...
FastAPI(七十五)实战开发《在线课程学习系统》接口开发-- 创建课程
源码见:"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 上次我们分享了,FastAPI(七十四)实战开发《在线课程学习系统》接口开发-- 删除留言 从本篇文章开始,…...
【C++】 条件变量实现线程同步示例
在做一些比较大的项目的时候,需要实现线程同步, 这里结合一个小示例,进行线程同步的讲解 问题定义 以下是一个使用 C 多线程和条件变量的示例,展示了线程 A 接收一个 enable 信号并通知线程 B 开始工作。线程 B 在开始工作之前…...
linux下载redis安装并指定配置文件启动
linux下载redis并安装启动: 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 修改…...
线性结构、线性表、顺序表、链表、头插法、尾插法、中间插入或删除一个节点
梳理几个名词: 逻辑地址:就是说是第几个元素。 物理地址:也就是存储地址,在计算机里具体存放的位置。 线性表的存储结构分为: (1)顺序存储结构:将数据依次存储在连续的整块物理空…...
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# 中用于并行编程的一个的方法,它属于 System.Threa…...
vue2 前端实现pdf在线预览(无插件版)
toFielDetail()是点击预览的方法,getOfficialFile是获取文件流的接口正常定义即可: export function getOfficialFile(query) {return request({url: /dataAsset/projectassess/getOfficialFile,method: get,params: query,}); } 调用接口的页面需要引用…...
排序XXXXXXXXX
信息学奥赛|常见排序算法总结(C+) - 腾讯云开发者社区-腾讯云 (tencent.com) https://cloud.tencent.com/developer/news/975232 常用序号层级排序 一、序号 序号Sequence Number,有顺序的号码,如数字序号…...
【文件解析漏洞】实战详解!
漏洞描述: 文件解析漏洞是由于中间件错误的将任意格式的文件解析成网页可执行文件,配合文件上传漏洞进行GetShell的漏洞! IIS解析漏洞: IIS6.X: 方式一:目录解析 在网站下建立文件夹的名字为.asp/.asa 的文件夹,其目…...
【杂谈】学会让你节省三秒钟——Dev-c++的缺省源
【杂谈】学会让你节省三秒钟——Dev-c的缺省源 1.前言2.缺省源的介绍3.注意 1.前言 你是否在为每次写程序都要自己手打一遍框架而感到苦恼?为什么大佬的Dev-C一新建文件就会自动出现程序框架?看完这篇文章,让你也能成为大佬,不用再…...
推荐一款前端滑动验证码插件(Vue、uniapp)
uniapp版本:滑块拼图验证码,有后端,简单几步即可实现,小程序、h5都可以用 - DCloud 插件市场 Vue版本及cdn版本可以查阅文档: 行为验证 | Poster 文档 示例代码: <template><view id"app&…...
【Git】git stash
目录 基本概念参数详解listshowsavepushpop|applydropclearbranch 参考文章 Git的stash命令是一个非常实用的功能,它允许开发者临时保存工作目录和暂存区的更改,以便能够切换到其他分支或进行其他操作,而不会丢失当前的修改。以下是git stash…...
不得不安利的程序员开发神器,太赞了!!
作为一名程序员,你是否常常为繁琐的后端服务而感到头疼?是否希望有一种工具可以帮你简化开发流程,让你专注于创意和功能开发?今天,我要向大家隆重推荐一款绝佳的开发神器——MemFire Cloud。它专为懒人开发者准备&…...
吴恩达机器学习C1W2Lab06-使用Scikit-Learn进行线性回归
前言 有一个开源的、商业上可用的机器学习工具包,叫做scikit-learn。这个工具包包含了你将在本课程中使用的许多算法的实现。 目标 在本实验室你可以: 利用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% }}>状态&…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
npm安装electron下载太慢,导致报错
npm安装electron下载太慢,导致报错 背景 想学习electron框架做个桌面应用,卡在了安装依赖(无语了)。。。一开始以为node版本或者npm版本太低问题,调整版本后还是报错。偶尔执行install命令后,可以开始下载…...
