首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏h5

    electron31+vue3 setup桌面端Exe聊天系统

    这次带来全新跨平台electron31.x+vue3+vite5+element-plus仿微信电脑端聊天程序。 vite5-electron-wechat项目采用最新版跨端技术electron31结合vite5.x开发桌面端聊天框架。 插件:vite-plugin-electron^0.28.7electron-vtechat项目支持新开多个窗口。 打包构建配置打包是通过electron-builder插件,在项目根目录新建一个electron-builder.json打包配置文件。 ${ext}" }}综上就是electron31+vue3开发桌面端聊天项目的一些分享,希望对小伙伴们有些帮助!

    94621编辑于 2024-07-09
  • 来自专栏coding个人笔记

    用Electron打包vue项目变成.exe桌面程序

    Electron现在挺火的,官网的标语是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。 打包成功: image.png 项目里面多了dist_electron文件,里面的.exe就是客户端了,直接双击就能启动。 这边会把生成对应的.exe在C:\Users\dell\AppData\Local里面。 如果是老项目一样的命令,先安装electron,再添加打包模块。 要开发的话运行npm run electron:serve,然后修改代码,审查元素,也是支持热更新的: image.png 如果用桌面程序,还是有一些要调整的,比如我这项目用的视口宽高就不适应了。 大概就是这样了,Electron有哪些api都没去试就是成功打包出了.exe,具体的API还是得要开发应用的时候才会去好好了解。 (完)

    2.1K21发布于 2021-03-30
  • 来自专栏趣谈前端

    electron桌面端Dooring搭建实战

    之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论. dooring-electron架构介绍 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron / dooring-electron的技术栈笔者使用的是: koa2 + electron + react + umi3 接下来我将给大家介绍如何学习使用dooring-electron. dooring-electron 如何快速学习electron 这里我来谈谈如何快速上手使用electron, 首先使用electron前大家最好具备如下知识基础: html + js + css 基础 熟悉nodejs基本api 有了以上基础

    1.3K50编辑于 2022-04-06
  • 来自专栏start

    React使用Electron开发桌面端

    结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤: 1. 安装Electron 首先,你需要安装Electron。在终端中运行以下命令: npm install electron --save-dev 2. 创建Electron应用程序 使用Electron提供的CLI工具,你可以创建一个Electron应用程序。 总之,使用React和Electron一起开发桌面应用程序可以帮助你快速构建跨平台的应用程序,并提供许多强大的功能。通过使用React构建Web界面,你可以使用熟悉的工具和技术来构建应用程序。 如果你想构建一个桌面应用程序,React和Electron可能是一个不错的选择。

    2.4K10编辑于 2024-03-20
  • 来自专栏h5

    Electron41+React19+Antd桌面版后台管理Exe系统

    经过一周爆肝研发,又一个原创新项目完结~ 2026年9月实战跨平台electron41+react19.2+ant-design客户端通用中后台前端admin管理系统ElectronReacAdmin。 Electron-React19-WinChat聊天系统|react+electron客户端聊天程序ExeReact19+Arco+Zustand仿macOS风格webOS桌面系统electron38- vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38+Vite7+Pinia3+ElementPlus客户端聊天程序 vite8+vue3.5+arcoDesign网页端webOS桌面框架自研Vite8+NaiveUI+Vue3+Echarts后台管理系统全新研发Flutter3.41桌面版OS系统最新款flutter3.41 + Vite8打造流式输出客户端AI助手基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe

    13520编辑于 2026-09-10
  • 来自专栏h5

    electron-vue仿微信桌面端|electron聊天实例

    electron-vchat客户端聊天实例是基于electron+vue+vuex+Node+vue-router等技术开发的仿制微信pc桌面聊天项目。 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 electron主进程创建窗口 通过electron提供的BrowserWindow对象创建窗体,electron-vue构建项目后,主进程入口页面是src/main/index.js import obj); //range定位到obj range.collapse(false); //光标移至最后 range.select(); } } 截图功能是通过Node中的execFile方法执行exe 文件,exe调用同级目录下的微信截图dll,调出截图工具 // 可编辑div contenteditable中粘贴发送图片 submitPasteImage{ let that = this this

    6.7K41发布于 2020-01-10
  • 来自专栏dmhsq_csdn_blog

    vite+vue3+electron桌面端开发

    vite+vue3+electron桌面端开发 ps :踩坑踩了一个多小时 如果嫌麻烦可以直接拿走用 克隆代码仓库 1.https://gitee.com/dmhsq/vue3-vite-electron https://gitee.com/dmhsq/vue3-vite-electron.git 2.https://github.com/promiseHusky/vue3-vite-electron https://github.com/promiseHusky/vue3-vite-electron.git 同样你也可以使用脚手架 来快速的创建 还没写完 先用着仓库的吧 效果如下 这是打包生成的 [ 生成的logo像素至少为 256x256否则会在打包的时候报错 开发注意 因为这里使用的是高版本electron 如果你想在 vue文件中 引入remote 需要安装一个依赖包 @electron '); const isDev = require('electron-is-dev'); const AppWindow = require('.

    1.6K00编辑于 2022-03-11
  • 来自专栏dmhsq_csdn_blog

    uni-app+uniCloud+electron 开发桌面端

    uni-app+uniCloud+electron 开发桌面端 摸索中… 摸不着头脑… 视频介绍https://www.bilibili.com/video/BV18q4y1i7x3? spm_id_from=333.999.0.0 实现了 开发 打包 基本功能 正常开发uni-app应用一样的流程 仓库地址 uni-app+electron+uniCloud 仓库地址 https:/ /gitcode.net/qq_42027681/uniApp-electron 另外一种使用 云函数 url化的 vite+vue3+electron+uniCloud 仓库地址 https://gitee.com /dmhsq/vite-vue3-electron-uni-cloud 代码结构 electron目录存放 electron的main.js 其它和uni-app一样 开发模式 HB 运行到浏览器

    1.6K20编辑于 2022-04-13
  • 来自专栏dmhsq_csdn_blog

    vite+react-ts+electron 开发桌面端

    vite+react-ts+electron 开发桌面端 代码仓库 https://gitee.com/dmhsq/react-ts-vite-electron https://github.com/promiseHusky /react-ts-vite-electron vite搭建项目 npm init vite@latest my-electron 选择 react-ts 安装依赖包 npm i concurrently electron cross-env -D 创建main.js const { app, BrowserWindow } = require('electron'); class AppWindow 'closed', () => { mainWindow = null; app.quit(); }); }); 配置package.json文件 { "name": "my-electron main.js 复制资源(logo.ico) 打包 electron 使用electron-builder [在这里插入图片描述]

    2.1K20编辑于 2022-03-16
  • 来自专栏趣谈前端

    从零使用electron搭建桌面端Dooring

    之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-electron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooring-electron的github地址供大家参考学习. 如果大家有更好的方案, 可以随时和我讨论. dooring-electron架构介绍 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron / dooring-electron的技术栈笔者使用的是: koa2 + electron + react + umi3 接下来我将给大家介绍如何学习使用dooring-electron. dooring-electron 如何快速学习electron 这里我来谈谈如何快速上手使用electron, 首先使用electron前大家最好具备如下知识基础: html + js + css 基础 熟悉nodejs基本api 有了以上基础

    1.9K30发布于 2021-07-12
  • 来自专栏前端加油站

    electron 将pc端(vue)页面打包为桌面端应用

    于是乎,就想着把自己写的这个小项目打包成桌面端,方面每次打开电脑就能看。经过网上查阅,比较成熟的解决方案很多,比如electron,nw.js等等。 打包桌面端,跟前端框架无关,只是想夸一下vue在构建项目上的体验真的好,简单方便,会以yes or no的形式让你完成一个主流的前端框架(回想以前构建angular应用,还要打开help,看一大堆api cnpm,npm太慢了 npm start 项目跑起来之后,不出意外就出现了electron的桌面端页面,看了下其中的入口文件main.js mainWindow.loadURL(url.format pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) 这段代码就是配置桌面端应用的入口 总结 至此,vue打包桌面端就这样完成了。在此过程中,发现自己做东西还是有些武断,太想当然了,导致在一些弯路里绕了很久。以后还是要多看文档,稳扎稳打!

    2.9K20发布于 2019-07-02
  • Electron 项目在“鸿蒙端”与“桌面端”运行的区别

    for OpenHarmony Electron 项目在“鸿蒙端”与“桌面端”运行的区别 我们以一个真实案例来对比: 案例:一个“跨设备搜索”鸿蒙应用 功能描述 用户在手机上点击“搜索”,触发以下逻辑 桌面端预览。 真机 / DevEco) Electron 桌面端(仿真器) 运行环境 HarmonyOS 内核 + ArkTS + WebKit Electron(Chromium + Node.js) API 来源 ('真实设备ID:', id)); // Electron 桌面端(模拟) window.harmony.deviceInfo.then(info => { console.log('模拟设备:' 场景 鸿蒙端 Electron 桌面端 UI 适配验证 ❌ 需真机测试 ✅ 支持多分辨率切换 业务逻辑联调 ⚠️ 依赖真机部署 ✅ 即时反馈,无需编译 分布式通信测试 ✅ 真实软总线 ✅ 模拟软总线(

    41810编辑于 2025-12-21
  • 来自专栏前端开发分享

    得物商家客服桌面端Electron技术实践

    桌面应用的转化在未来是客服产品的方向。已有web端聊天系统的前提下,商家客服为什么要迁移桌面应用? Native APIs:Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。 在上文说到两个字“迁移”,是的,我们在开发桌面应用之前有非常成熟的web端商家客服聊天系统了,所以我们在开发桌面应用的时候大多数时候是关心主进程的,渲染进程并不太需要关心。 4.技术挑战在从0到1搭建商家客服桌面端的过程中,遇到了很多的问题,Electron社区虽然很活跃,但是不一样场景遇到的问题,几乎找不到对应的解决方案,所以很多都是在探索过程中不断的去完善。 4.1 安全性问题Electron客户端的安全问题也是非常重要的,那都遇到了哪些安全问题以及我们又是如何解决的呢,具体如下:渲染进程XSS:Electron实现的桌面端软件渲染层的原理实际是通过chrome

    1.8K30编辑于 2023-02-09
  • 来自专栏得物技术

    得物商家客服桌面端Electron技术实践

    桌面应用的转化在未来是客服产品的方向。 已有web端聊天系统的前提下,商家客服为什么要迁移桌面应用? Native APIs:Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。 在上文说到两个字“迁移”,是的,我们在开发桌面应用之前有非常成熟的web端商家客服聊天系统了,所以我们在开发桌面应用的时候大多数时候是关心主进程的,渲染进程并不太需要关心。 4.技术挑战 在从0到1搭建商家客服桌面端的过程中,遇到了很多的问题,Electron社区虽然很活跃,但是不一样场景遇到的问题,几乎找不到对应的解决方案,所以很多都是在探索过程中不断的去完善。 4.1 安全性问题 Electron客户端的安全问题也是非常重要的,那都遇到了哪些安全问题以及我们又是如何解决的呢,具体如下: 渲染进程XSS:Electron实现的桌面端软件渲染层的原理实际是通过chrome

    1.6K11编辑于 2023-03-22
  • 来自专栏python爬虫实战之路

    Electron+Vue3.2+TypeScript+Vite开发桌面端

    Electron可以让程序员重用Web的代码,使用HTML、CSS、JavaScript来构建桌面应用,并在不同平台上使用。 Electron官网上说:“比你想象的更简单”————“如果你可以建一个网站,你就可以建一个桌面应用程序。 /" 配置完下载源后,就可以安装 electron 了 安装Electron yarn add -D electron electron-builder rimraf vite-plugin-electron ExectronVueVite_1.0.0.exe 文件是安装包,打开会显示安装过程,执行完安装过程后在系统的控制面板中的软件列表中可以看到该软件,也可以执行卸载。 打开后就是正常的软件界面 我们创建好了项目结构,那么在使用 Vue 开发 Electron 桌面应用的时候还有一个比较重要的知识点要了解,就是消息通信。

    3.4K10编辑于 2022-08-31
  • 来自专栏得物技术

    得物商家客服桌面端Electron技术实践

    桌面应用的转化在未来是客服产品的方向。已有web端聊天系统的前提下,商家客服为什么要迁移桌面应用? Native APIs:Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。 在上文说到两个字“迁移”,是的,我们在开发桌面应用之前有非常成熟的web端商家客服聊天系统了,所以我们在开发桌面应用的时候大多数时候是关心主进程的,渲染进程并不太需要关心。 4.技术挑战在从0到1搭建商家客服桌面端的过程中,遇到了很多的问题,Electron社区虽然很活跃,但是不一样场景遇到的问题,几乎找不到对应的解决方案,所以很多都是在探索过程中不断的去完善。 4.1 安全性问题Electron客户端的安全问题也是非常重要的,那都遇到了哪些安全问题以及我们又是如何解决的呢,具体如下:渲染进程XSS:Electron实现的桌面端软件渲染层的原理实际是通过chrome

    81000编辑于 2025-08-11
  • 【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用

    前言 在Electron应用中结合使用Vue.js,可以创建功能强大的桌面应用程序。 /-/binary/electron-builder-binaries/ always-auth=false 如何设置打包的logo、设置exe图标 参考文章: electron打包应用logo 在background.js中找到width与height 就是窗口的大小 如何设置打开窗口的名称/标题 在background.js中添加代码,如下图 添加后的效果图 如何设置打包后exe 打包桌面应用程序改变其名字 module.exports = { runtimeCompiler: true, pluginOptions: { electronBuilder builderOptions: { 'productName': '芯片测试数据分析' //此处表示打包后的桌面应用程序的名字

    2K10编辑于 2025-12-15
  • 来自专栏h5

    Electron-React19-WinChat聊天系统|react+electron客户端聊天程序Exe

    经过了整整两周的高强度研发,最新原创力作electron41+react19全家桶构建轻量级桌面电脑版聊天系统项目,正式完结啦! +react19实战桌面端聊天室的一些项目分享知识。 electron38-vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38+Vite7+Pinia3+ElementPlus +arcoDesign网页端webOS桌面框架自研Vite8+NaiveUI+Vue3+Echarts后台管理系统全新研发Flutter3.41桌面版OS系统最新款flutter3.41 & dart3.11 打造流式输出客户端AI助手基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板 最新原创

    18120编辑于 2026-08-17
  • 来自专栏dmhsq_csdn_blog

    桌面端开发---vue结合electron的热开发框架

    Vue3.x版本 git clone https://github.com/dmhsq/electron-vue3-dmhsq.git 目录说明 electron文件夹控制桌面端的运行打包 其余均为 vue目录 electron/main.js 桌面应用主程序 electron/main.js 桌面应用渲染程序 electron-vue-dmhsq 如果您只是想打包vue项目成exe npm electron npm run builds 打包的文件在electron下 热开发页面 npm run build 执行完成后 开启额外的控制台 cd electron npm run serve 热开发electron npm run builds 执行完成后 开启额外的控制台 cd electron npm run serve 打包electron应用 最终打包需要删除electron/main.js 打包为exe程序 ?

    1.3K20发布于 2021-01-26
  • 来自专栏用户9379088的专栏

    Electron搭配React的history路由模式打包exe客户端

    D //安装electron cnpm i electron-builder -D // 用来打包客户端安装包 -- 需要下一步下一步安装来完成点击打开 cnpm i electron-packager -D // 用来打包客户端可执行文件 -- 直接点击打包后的可执行文件即可运行 // 安装生产相关依赖 cnpm i electron-log // 用于调试时的log输出,dev环境会直接在终端打印日志同时会在项目跟目录的 exe安装文件或者dmg├── logs // 用于存放项目调试log文件├── main.js // electron的主进程文件├── media // 项目的多媒体文件诸如.mp3 dmg安装包 "winpack": "electron-builder build --win" // 用于打包exe安装包 复制代码 在electron启动前端项目首先需要将打包后的前端代码放到项目 由于业务要求我们只需要打包.exe所以以下是关于打包exe应用的相关配置。

    2.2K30编辑于 2022-07-14
领券