郑州做网站价格/seo关键词排名优化怎样
前言: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% }}>状态&…...

编程小白如何从迷茫走出
针对新生们常常感到的迷茫,以下是如何选择适合自己的编程语言、如何制定有效的学习计划以及如何避免常见的学习陷阱的详细建议: 一、如何选择适合自己的编程语言 明确需求和目标:不同的编程语言有不同的特点和适用场景。例如,Py…...

14 B端产品的运营管理
通过运营找到需求并通过交换价值提供供给,再逐步扩大规模、站稳脚跟,辅助产品在商业竞争中获胜。 B端产品运营框架 1. 打通渠道 目的:触达客户。 环节:文案策划、活动策划→广告渠道推广→线下BD。 线下BD:通过见面…...

STM32_RTOS学习笔记——1(列表与列表项)
总体RTOS笔记目录 一,列表与列表项(本文) 二,待定 视频参考:B站野火 一,C语言列表概念 列表就是C语言中的链表,链表就如同下面的衣架一样,需要的各种内容可以参考 C语言链表可…...

子网划分案例
划分子网是将一个较大的网络划分为多个较小的子网,以提高网络管理和安全性 子网划分可以更有效地利用 IP 地址空间,并且有助于控制网络流量、提高网络性能和安全性。 子网划分的主要步骤如下: 确定需要划分的子网数量以及每个子网所需的主…...

javaweb_02:Maven
一、引入 在javaweb的开发中,需要使用大量的jar包,我们得手动去导入,而Maven可以自动帮我们导入和配置这个jar包。 二、Maven项目框架管理工具 核心思想:约定大于配置(有约束不违反):Maven会…...

19.延迟队列优化
问题 前面所讲的延迟队列有一个不足之处,比如现在有一个需求需要延迟半个小时的消息,那么就只有添加一个新的队列。那就意味着,每新增一个不同时间需求,就会新创建一个队列。 解决方案 应该讲消息的时间不要跟队列绑定…...

P10477 Subway tree systems 题解,c++ 树相关题目
题目 poj 链接 洛谷链接 n n n 组数据,每组数据给定两个 01 01 01 串(长度不超过 3000 3000 3000),意思如下: 对于每一个 0 0 0,代表该节点有一个子节点,并前往该子节点。对于每一个 1 1 …...

18.jdk源码阅读之CopyOnWriteArrayList
1. 写在前面 CopyOnWriteArrayList 是 Java 中的一种线程安全的 List 实现,基于“写时复制”(Copy-On-Write)机制。下面几个问题大家可以先思考下,在阅读源码的过程中都会解答: CopyOnWriteArrayList 适用于哪些场景…...

美股:AMD展现乐观前景,挑战AI加速器市场霸主
在科技行业的激烈竞争中,AMD公司近期发布了对当前季度收入的乐观预测,显示出其新推出 一、AMD第三季度营收预期超越分析师平均预期 AMD在周二的声明中预计,第三季度营收将达到约67亿美元,这一数字超出了分析师此前平均预期的66.…...

如何提高计算机视觉技术在复杂环境和低光照条件下的物体识别准确率?
要在复杂环境和低光照条件下提高计算机视觉技术的物体识别准确率,可以采取以下几个方法: 数据增强:在训练集中添加各种复杂环境和低光照条件下的图片,通过增加数据的多样性,使算法能够更好地适应各种场景。 预处理&am…...