electron-vite_1搭建项目

于 2024-10-10 18:08:05 发布
阅读量81 收藏
点赞数
分类专栏： electron-vite2024新手上路 文章标签： electron javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014708123/article/details/142827289
版权

脚手架选型，electron-vite；Electron开发构建工具基于Vite的；目前项目是使用Vite写的所以用这个集成比较快；目前他们也有提供vue和react的模板；
基于 Vite，快速、简单且功能强大

框架连接

electron-vite

目前整个系列所使用的是 react+ts的模板
npm create @quick-start/electron az_collab_com_desktop -- --template react-ts
码云地址

技术都是有时效性的，过期了可能有些api的不一样，用法也不一样，所有单独存了一个分支到码云；后面那个是日期；2024年10月09日；

https://gitee.com/WebYunKaiFa/yyh_electron_desktop_20241009
web前端进阶者
关注
专栏目录
创建一个electron-vite项目
m0_71231013的博客
03-18 1216
然后进入目录，下载包文件，运行项目到以上步骤，你已经成功运行起来一个 electron项目。拓展知识：接下来 我们可以给他删除不必要的文件，添加ui组件库，添加router管理，添加axios请求。
使用electron-vite搭建一个web桌面应用
qq_46516788的博客
09-27 439
最近有个业务需要使用到electron这个技术进行搭建web的桌面应用，本人在试坑的路上已经不知道掉了多少坑了，我先开始使用两个框架一起搭的，刚开始使用vite创建了一个vue3的项目然后再安装electron进行综合构建electron-vue项目，但是官方提供了一个electron-vite的脚手架用于搭建，而且是使用vite搭建的，不用之前的两次启动，一键启动，而且热更新，下面是两种搭建方式的区别。
Electron-1 electorn + vue3 + vite项目搭建,使用Electron-vite构建工具
qq_51355375的博客
05-25 481
注意问题： electron打包时会将整个工程打包到resource/app中，而且程序运行时主进程应用路径就是这个app路径，所以在主进程使用相对路径时注意路径是否正确。还有electron如果使用ts的话最终是以编译后的js文件为基准。
使用 electron-vite-vue 构建 electron + vue3 项目并打包
qq_45897239的博客
05-06 3352
执行打包命令后，控制台将会出现压缩包的下载地址，此时复制下载地址至浏览器进行下载，并将文件放至指定路径即可解决无法下载或下载速度慢的问题。执行后将会下载多个文件，确保杀毒软件(如：火绒)、防火墙没有拦截相关下载请求。后续查找相关资料，总结网友分享的经验，推测问题大概出在镜像源，尝试修改。注：如果命令行方式无效，可尝试方法一中的手动方式修改。安装依赖时报错 (operation not permitted)
探索高效开发：electron-vite-react 开源项目推荐
gitblog_00655的博客
08-18 383
探索高效开发：electron-vite-react 开源项目推荐 electron-vite-react:electron: Electron + Vite + React + Sass boilerplate.项目地址:https://gitcode.com/gh_mirrors/el/electron-vite-react 项目介绍 electron-vite-react 是一个集成了 E...
超详细！！！electron-vite-vue开发桌面应用之项目环境搭建（一）
qq_43206280的博客
08-08 568
这是electron的安装并不依赖本地npm中registry所配置的镜像，需要增加名称为electron_mirror的镜像源。执行npm install可能会报错。
超详细！！！electron-vite-vue开发桌面应用之环境变量配置（十一）
qq_43206280的博客
08-19 732
在开发项目时，我们一般需要搭建不同环境下的配置参数，通过环境变量来区分是在构建正式环境还是开发环境。Vite使用.env文件来定义环境变量，并且可以通过.env.local、.env.[mode]和.env.[mode].local文件来对不同环境进行配置。
探索下一代Electron构建工具：electron-vite
gitblog_00717的博客
08-15 881
探索下一代Electron构建工具：electron-vite electron-viteNext generation Electron build tooling based on Vite 新一代 Electron 开发构建工具，支持源代码保护项目地址:https://gitcode.com/gh_mirrors/el/electron-vite 在构建桌面应用程序的领域中，Electro...
electron-vite搭建桌面端应用程序
qq_41306452的博客
02-23 1317
3、electron-vite官网提供的几个插件，帮助打包后代码的封闭性等问题。下面是我package.json插件。1：commit提交检查和拦截。其他按照官网流程往下搭建就行。
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
vue3+ts+vite+electron electron-builder等文件打包参数配置说明
Missxu1895的博客
04-29 536
前端vue3+ts+vite+electron 打包electron-builder.json、electron-builder.yml等配置文件参数说明
vue3+vite+Electron构建跨平台应用
qq_37312180的博客
03-20 524
electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。它主要由五部分组成： 一套构建指令，它使用 Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。 集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。 为渲染器提供快速模块热替换（HMR）支持，为主进程和预加载脚本提供热重载支持，极大地提高了开发效率。 优化 Electron 主进程资源处理。
基于react、vite、electron快速创建工程
daofaziran2011的专栏
05-04 844
如何创建electron-vite-react 创建vite应用 yarn create @vitejs/app electron-vite-react --template react cd electron-vite-react yarn 安装electron打包工具 yarn add --dev @electron-forge/cli 当打包工具安装完成后，我们设置一下electron打包配置，然后我们就可以通过electron-forge进行electron打包了。 yarn electro
构建electron项目
YUELEI118的博客
10-02 710
pnpm i。
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1230
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 273
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Vue根实例、实例总结
m0_54007573的博客
10-04 659
Vue根实例、实例总结
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1455
vue-live2d看板娘集成方案设计使用教程
electron-vite
12-29
根据提供的引用内容，以下是关于electron-vite的介绍和演示： electron-vite是一个基于Vite构建工具的Electron应用程序开发框架。它结合了Vite的快速开发能力和Electron的跨平台能力，使得开发Electron应用程序更加高效和简单。 要使用electron-vite，首先需要安装electron和vite-plugin-electron。可以按照以下步骤进行安装： 1. 进入electron-demo目录： ```shell cd .\electron-demo\ ``` 2. 设置electron的镜像源为淘宝镜像： ```shell pnpm config set electron_mirror "https://npm.taobao.org/mirrors/electron/" ``` 3. 安装electron和vite-plugin-electron： ```shell pnpm install electron -D pnpm install vite-plugin-electron -D ``` 配置electron： 1. 新建electron/index.ts文件： ```shell mkdir electron echo >index.ts ``` 以上是关于electron-vite的介绍和安装步骤。你可以根据这些步骤来开始使用electron-vite进行Electron应用程序的开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值