vue-cli3.x+electron安装教程

Electron-vue搭建vue全家桶+Element UI客户端(一) 一、新建项目 1、初始化项目 electron-vue是vue-cli和electron结合的项目,比单独使用vue构建起的electron项目要方便很多. 打开cmd,新建一个项目,我使用的是electron-vue,输入以下命令: vue init simulatedgreg/electron-vue my-project my-project就是我们自己取的项目名。 如果出现下图问题,说明... 阅读详情

前言

这几天想搞个桌面软件玩玩,然后经过各种安装都靠不住,所以还是打算写一篇文章记录自己安装过程遇到的坑,需要对你有帮助。


教程开始

ps:请自行安装好vue环境

vue create my-electron

在这里插入图片描述

cd 项目名称

在这里插入图片描述
我们使用 electron-builder插件 安装主要为了省事

vue add electron-builder

在这里插入图片描述

问题开始

  1. node install.js报错
  2. Response code 404 (Not Found) for https://npm.taobao.org/mirrors/electron/v1
  3. …

问题解决

再次执行

vue add electron-builder

在这里插入图片描述选择 y,回车
在这里插入图片描述运行项目

yarn electron:serve

在这里插入图片描述这时候要使用cnpm安装electron依赖,cpnm安装传送门

cnpm install --save electron

在这里插入图片描述再次运行项目

yarn electron:serve

在这里插入图片描述还缺少依赖,我们在使用cnpm安装

cnpm install --save electron-devtools-installer

在这里插入图片描述安装好之后,我们在运行

yarn electron:serve

在这里插入图片描述发现没有反应…啥情况,我们等待一下会出现
在这里插入图片描述等着等着,就出现了
在这里插入图片描述搞定~


总结

vue-cli3.x+electron坑很多,你不躺一下不知道多深,我也百度+谷歌+翻github都不靠谱,环境是一个难搞的东西,如果本篇文章对你有帮助不如点个赞、收藏。

Zemax实现微透镜阵列光束整形(原理+仿真) 通过Zemax实现微透镜阵列的光场整形仿真。 阅读详情

相关推荐

汽水音乐自动化薅羊毛教程:从零搭建稳定赚钱脚本

📖 前言:为什么要学习自动化脚本?在数字时代,时间就是金钱。汽水音乐等App通过观看广告奖励用户金币的模式,本质上是将我们的时间转化为收益。本教程将教你如何用Python自动化这个过程,让程序为你"打工",实现被动收入。通过本教程,你将学到:移动端自动化测试的核心技术Python在自动化领域的实际应用如何将重复性任务转化为自动化流程创造属于自己的"数字员工"第一章:环境准备与基础配置1.1 硬件要求Android手机一部(建议使用备用机)USB数据线。

weixin_44947827的博客 5784

vite+vue3+electron项目搭建教程

因为vue项目的默认入口文件是index.html,eletron项目的默认入口文件是main.js,所以这里我们就要解决两个框架搭配时,以哪个文件为入口。手动在vue项目中的根目录创建文件然后在中修改人口文件因为vue项目默认采用的是ES6的模块化,而electron基于nodejs,nodejs的模块化又是使用的commonjs,所以我们在。

学而不思则罔 3201

RDMA性能调优实战:如何用ib_*命令榨干你的Mellanox网卡带宽?

本文深入探讨了如何利用ib_*命令工具集对RDMA网络进行深度性能调优,以充分释放Mellanox网卡的带宽潜力。文章从理解Send/Write/Read三种核心通信原语的差异入手,逐步指导读者通过调整消息大小、队列深度、内联数据等关键参数,并结合系统级的NUMA绑定、中断亲和性等优化策略,实现从基准测试到逼近硬件极限的性能提升。

weixin_29306011的博客 88

vite+electron构建一个VUE3桌面应用

使用vite+electron创建一个vue3项目

qq_45787691的博客 6400

详解岭回归与L2正则化

最小二乘法存在不可逆和病态问题,导致解析解不可计算或不稳定,岭回归是一种有效的解决方法,以损失无偏性来换取稳定解, 本文介绍详细介绍了岭回归的基本原理,并从L2正则化角度来进行了解释。

Luoyingfeng的博客 1万+

ComfyUI 的 LoRA 训练:素材打标签与调优全攻略

标签是 LoRA 训练的"地基"——地基打不牢,后续调参再精细也难出好效果。记住:标签要"少而精",聚焦独特点,用触发词控效果。下一篇我们将讲解参数设置,让你的优质标签发挥最大价值~

2301_78150483的博客 3099

vue3集成electron

vue3 vue 集成 electron 白屏 打包

I_xuebi的博客 9037

【K8S系列】在 Kubernetes 中使用 Prometheus 进行监控的详细指南

Prometheus 是一个开源的监控和报警工具,广泛用于 Kubernetes 环境中。本文将深入探讨如何通过 Kubernetes 中的注解配置 Prometheus 的抓取设置,以高效监控服务,并确保系统的可靠性和可维护性。

颜淡慕潇 2万+

如何正确的安装Electron,并完成vue3+electron的环境搭建

本文主要介绍了,如何使用 vue3+electron 的环境搭建配置,其中比较重要的就是在安装 electron 的时候碰到的下载问题如何解决和启动 electron 的时候如何把 vue 内嵌至 electron中,在运行项目的时候正确的启动项目。前人裁树,后人乘凉,希望大家在搭建的时候不会遇到任何bug,欢迎一起交流

不喜欢BUG,喜欢前端的日子 5634

电压跟随器在ADC采样电路中的作用分析

电压跟随器在ADC采集系统中扮演关键角色,它能解决分压电路因ADC输入阻抗导致的电压误差问题。通过运放构成的电压跟随器可隔离信号源与负载,保证采样精度,尤其适用于高阻抗传感器或高速采样场景。工程应用中需注意运放带宽、轨对轨输出能力及抗干扰设计。合理使用电压跟随器能显著提升信号完整性,在复杂电子系统中成为不可或缺的"信号桥梁。

硬核科技 655

智能化教育改革中的教师角色转变:AI应用架构师如何设计“人机协同”系统?

个性化与规模化的矛盾:如何用AI实现规模化的个性化学习,同时保留教师的“人文温度”?自动化与自主性的矛盾:如何用AI自动化流程(如批改),同时避免教师沦为“AI操作工人”?数据驱动与经验驱动的矛盾:如何平衡AI的“数据决策”与教师的“经验决策”,避免“算法偏见”或“经验固化”?在智能化教育改革中,教师始终是教育的核心——AI系统是“辅助工具”,而非“替代者”。

小白菜的博客 1269

【架构】vue-cli集成electron

本文介绍了一种快速将Web应用转换为桌面端程序,实现代码复用、跨平台部署和便捷更新

zyy_333的博客 1512

uniapp [全端兼容] - 实现连接蓝牙电子秤+监听数据转换并实时返回示例代码,uniApp实现BLE蓝牙连接多个电子秤设备、蓝牙通讯协议对接详细教程(全平台兼容H5、微信小程序、苹果安卓App)

uniapp连接蓝牙电子秤,uniapp如何连接电子秤蓝牙,蓝牙称重,实现监听数据转换并实时返回,多蓝牙,uni-app电子秤16进制蓝牙通讯协议对接,uniapp微信小程序蓝牙获取电子秤的值,uniapp蓝牙称重电子秤,蓝牙电子秤硬件,APP端连接蓝牙秤获取重量实时显示在页面上蓝牙秤,插件组件,蓝牙连接失败,uniapp安卓苹果ios连接蓝牙电子秤没反应,uniapp微信小程序 蓝牙低功耗连接发送数据监听接收,uni-app小程序蓝牙连接、读写数据全过程,uniapp连接蓝牙体脂秤,蓝牙搜索不到怎么办,如

🏆 前端领域优质创作者 1万+

[ Vue | Electron ] 使用 vue-cli3.x 快速构建 electron 项目

重要 此方法仅用于 Vue-CLI 3 (vue create my-app) 创建的项目,不适用Vue-CLI 2 (vue init webpack my-app)! 如果想使用 Vue-CLI 2 ,可以参考electron-vue 1. 使用Vue CLI3 创建项目("my-project" 改为自己想要取是项目名称) vue create my-project ...

ljw1412的博客 4068

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

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

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

Electron+vue-cli3开发跨平台桌面应用

这里写目录标题1.创建项目1.1 安装Nodejs1.2 使用cnpm加速下载1.3 为什么不使用electron-vue搭建呢1.4 安装/升级vue-cli31.5 创建vue项目1.6 自动安装Electron1.7 手动安装Electron1.8 编译并启动APP2.配置项目2.1 配置ESLint代码格式检查工具2.2 配置vue3.项目基本设定3.1 主进程和渲染进程简介3.2 APP窗口大小3.3 取消跨域限制3.4 取消菜单栏3.5 设置APP窗口图标3.6 设置APP窗口标题栏名称4.打包

EtherealSymbol的博客 1930

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

vue+electron 跨平台桌面应用开发实战教程

默认即可

家有喜娟儿的博客 1万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

使用vue-cli-plugin-electron-builder创建electron+vue项目

使用vue-cli-plugin-electron-builder创建electron+vue项目

三巧的博客 7835

[ Vue|Electron]使用vue-cli3.x快速构建electron项目

0) 使用 cli3 创建名叫"electrontest"的vue项目 vue create electrontest 1)进入项目文件夹 cd electrontest 2)添加插件 vue add electron-builder 3)当自动化脚本执行完毕后,使用开发模式运行 npm run electron:serve 4)项目开发完毕准备部署时 npm run electron:b...

RedLitchi is Blog 514

手把手教你使用Electron5+vue-cli3开发跨平台桌面应用

Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越...

1万+

vue-cli使用vue-cli-plugin-electron-builder插件,运行时不启动electron程序?

记录一个关于vue-cli的小小小小坑儿 前段时间使用vue-cli-plugin-electron-builder插件配合vue-cli 3.x/4.x搭建electron项目。 在我的电脑上运行npm run electron:serve,正常启动electron应用: > vue-demo1@0.1.0 electron:serve D:\demo\vue-demo1 > vue-cli-service electron:serve INFO Starting development

fyt0215的博客 7682

搭建Electron+Vue3开发环境

原文链接: 搭建Electron+Vue3开发环境 - 愧怍的小站 之前用electron-vue写过一个半成品的桌面端应用,但是是基于Vue2的,最近又想重写点桌面端应用,想要上Vue3+TypeScript,于是便有了这篇文章总结下具体的搭建过程。 Vue Cli Vue CLI 有一个插件vue-cli-plugin-electron-builder,可以非常方便的搭建electron环境。 npm i @vue/cli -g vue create my-app 根据自己项目的需求选择对应的依

kuizuo12的博客 3545

vue使用cli3.x整合electron桌面应用

注: 使用yarn,相信我,不然你会遇到很多麻烦 1.使用cli3.x创建一个vue项目,过程略 vue create hello-world 2.进入项目,下载依赖包 yarn install 3.下载electron相关包 yarn add electron yarn add electron-packager 4.在vue根目录创建electron.js // Modules to c...

qq_40544291的博客 1936

Vue-Cli4.x项目通过electron打包桌面应用程序

Vue-Cli4.x项目通过electron打包桌面应用程序 发现网上的教程大部分都是vue2.x目录结构不太一样 还有就是将一些问题整合在一起 傻瓜式教程 步骤一 下载electron的demo项目 electorn GitHub 下载demo electron-quick-start 步骤二 运行demo项目 用你的ide打开demo项目 在项目根目录下 npm install npm start 注意是根目录 执行成功界面 步骤三 在原vue项目里安装相关依赖 其中electron-pac

zzw1248001691的博客 2938

从零开始使用Electron13+vue-cli3开发跨平台桌面应用(0)

Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越来越受到开发者的喜爱。 本文一步一步教你如何使用Electron5和vue-cli3,在完全保留vue开发we

solar_Lan的博客 2168

Electron+vue-cli4开发跨平台桌面应用详细流程

Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越来越受到开发者的喜爱。 本文一步一步教你如何使用Electron5和vue-cli3,在完全保留vue开发web

weixin_44714325的博客 1189
上一篇: python安装torch
下一篇: 自考启蒙篇
An_s
博客等级 码龄10年 665粉丝 363原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

An_s

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

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

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

打赏作者

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

抵扣说明:

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

余额充值