现有的vue3+ts+vite项目集成electron

河马开源 河马开源 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.5k累计阅读 1.6k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄14年
关注
原创 2023-08-15 15:12:57 1.5k 阅读 AI 写同款· GEO 优化 ›

效果图

在这里插入图片描述

什么时Electron

Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容Mac、Windows和Linux，可以构建出三个平台的应用程序。

现有的vue3项目集成Electron

安装依赖

原来有一个vue3+ts+vite+pnpm的项目，其中sub-modules是子项目，web是主入口项目，项目结构如下：
在这里插入图片描述
需要将其转换成Electron项目，只需要在原来web项目上安装Electron依赖并进行配置即可。

在安装依赖前我们需要先设置下pnpm的源，如下：

pnpm config  set
了解本专栏 订阅专栏 解锁全文 超级会员免费看
标签
#electron #javascript #前端
vue3+vite+electron开发桌面端应用流程 【代码】vue3+vite+electron开发桌面端应用流程。 阅读详情

相关推荐

Electron+Vite+Vue3+Ts项目搭建

根据自己习惯选择TypeScript 或 JavaScript 教程默认选择TypeScript。显示这样 vue 项目搭建完成了，打开vscode或者webstrom 进行以下命令。my-element-plus-app 自定义项目名称。页面展示这样 Vite+Vue3+Ts 安装完成了。再package.json 文件添加以下。如出现以下错误，请关闭相关杀毒软件。展示选择的源代表切换成功。显示以上图片代表已安装成功。或直接执行命令也是可以的。

qq_24724153的博客 1161

vue3+ts+vite+electron搭建桌面应用

提示：开发桌面应用，就不得不提Electron ，之前使用vue+electron ,官方提供了Vue CLI Plugin Electron Builder,但是也只能使用了vue-cli(而且使用vue-cli-electron-builder构建，发现最新版本也才13,Electron最新版本都23了😅😅😅),随着vite的崛起以及ts,我们也需要与时俱进不是吗😃😃😃ts: ^4.9.3。

Bennett_G博客 2207

electron vite vue3 ts搭建

根目录新建 electron / index.ts。修改vite.config.ts 配置文件。修改package.json。创建一个vite 项目。安装electron。

wandoumm的博客 1695

Nordic nRF52832实战：手把手教你搭建智能手环BLE通信框架（附完整代码）

本文详细介绍了如何使用Nordic nRF52832芯片搭建智能手环的BLE通信框架，涵盖芯片优势、协议栈初始化、低功耗广播策略及健康数据服务实现。通过完整代码示例和架构设计，帮助开发者快速掌握蓝牙低功耗通信技术，适用于可穿戴设备开发。

weixin_29192141的博客 247

ADS2016子电路封装避坑指南：手把手教你制作可复用的自定义Symbol

本文详细介绍了在ADS2016中制作可复用的自定义Symbol的全流程，重点解析了子电路封装的常见问题与解决方案。从电路模块的标准化处理、Hierarchy创建技巧到Symbol视觉优化和库管理策略，帮助工程师提升射频与微波电路设计效率。特别针对Symbol比例适配和引脚优化等核心问题，提供了实用的避坑指南和工程验证方法。

weixin_30275415的博客 217

ArcGIS渔网分割实战：用Create Fishnet快速生成1km×1km网格（附GDP数据分析案例）

本文详细解析了ArcGIS中Create Fishnet工具在渔网分割中的应用，从基础操作到GDP空间分析全流程。通过1km×1km网格的创建与优化，实现经济数据的空间标准化和可视化表达，解决数据融合与分析的三大核心痛点。

weixin_29250403的博客 296

⭐️VMwareWorkstation17.0虚拟机安装搭建Windows 7虚拟机（完整图文详细步骤含配置VMware Tools教程）

本教程为大家提供了从安装VMware Workstation 17.0开始，到在虚拟机上成功搭建Windows 7专业版系统的完整步骤。我们详细介绍了准备阶段所需的软件和硬件要求，以及在VMware中配置和安装Windows 7系统的每一步操作。此外，我们还特别提到了如何在虚拟机上配置VMware Tools，以便更好地与宿主机进行交互。 通过本教程的学习，读者不仅能够掌握在VMware Workstation 17.0上安装Windows 7虚拟机的技能，还能了解到如何配置虚拟机的硬件以及安装VMwar

Python老吕的博客 2万+

python爬取银行年报2

python爬取公司年报（巨潮资讯网）

bboysteed的博客 4731

基于Simulink的新能源汽车热管理系统设计与仿真详细介绍

新能源汽车（如纯电动汽车和混合动力汽车）的热管理系统是确保电池、电机和电控系统高效运行的关键。通过合理设计热管理系统，可以提高车辆的续航里程、延长电池寿命并提升整体性能。以下是如何在 MATLAB 和 Simulink 中设计并仿真一个新能源汽车热管理系统的详细步骤。通过上述步骤，我们成功设计并实现了基于 Simulink 的新能源汽车热管理系统。该系统能够根据目标温度和实际反馈，通过 PID 控制器或模糊控制器调整冷却液流量、风扇转速等参数，实现对电池、电机和车内的精确温度控制。

xiaoheshang_123的博客 385

【系统架构设计师】预测试卷十：综合知识（75道选择题）

本文包含75道选择题，覆盖计算机系统、操作系统、网络、数据库、软件工程等核心知识域，其中系统架构设计与评估占比最高（19题）。题目难度稍高，注重灵活应用，题干全新且不与前8套重复。部分典型题目解析包括：计算机性能比较（CPU时间公式TLB/页表机制）、Cache写策略、流水线分支惩罚、管程条件变量、LRU近似算法、自旋锁适用场景、TCP字节流特性、Anycast应用、MVCC机制、分布式事务选型等。答案详解强调易错点，如性能比较需综合计算、TLB缺失不等于缺页、

数据知道的博客 478

智能Agent如何重塑企业流程

在当今数字化时代，企业流程的效率和敏捷性至关重要。传统企业流程往往受限于人工操作，效率低下、成本高昂，难以适应快速变化的市场环境。智能Agent作为一种新兴技术，凭借其强大的智能化能力，正在逐渐改变企业流程的运作模式，为企业带来新的机遇和挑战。智能Agent是一种能够感知环境、自主决策、执行任务的软件实体。它可以模拟人类的智能行为，例如学习、推理、规划和沟通。通过将智能Agent嵌入到企业流程中，可以实现流程的自动化、优化和智能化，从而提高效率、降低成本、提升客户体验。8.1 研究成果总结。

AGI×大数据，开启智能时代的认知跃迁；解码AGI，赋能数据驱动的智能革命。 874

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面，电脑运行连游戏界面都一样大小，很怀旧，很真实，（英文版）强烈推荐，很小的文件，很难才找到的。

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。
上一篇： vue3+vite+element pro + pnpm 创建的monorepo项目
下一篇： js将项目中的图片上传到服务器
点赞 0
评论 0
书签 书签 1
河马开源
河马开源
博客等级 码龄14年 103粉丝 117原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

河马开源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值