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都不靠谱,环境是一个难搞的东西,如果本篇文章对你有帮助不如点个赞、收藏。

Materials - UE5中的PivotPainter 可以使用3DS Max Script中的脚本(Pivot Painter)对模型进行处理,让每个Element都有自己的Pivot Point,来方便控制和制作一些特殊的顶点动画效果; 阅读详情

相关推荐

.NET 8 组件之IOC容器组件

NET 8中的IOC容器组件继承了前几代的优良传统,并在性能、扩展性、灵活性等方面进行了诸多优化,使得它在现代应用开发中依然保持领先地位。通过合理使用IOC容器,开发者可以更高效地管理依赖关系,编写更加模块化、可维护的代码。随着.NET生态的不断发展,IOC容器将继续扮演关键角色,为开发者提供强大的依赖管理功能。

hy_4377的博客 1528

vite+vue3+electron项目搭建教程

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

学而不思则罔 3201

用STM32的SPI接口读取MT6835磁编码器,手把手教你避开数据读取的坑

本文详细介绍了如何使用STM32的SPI接口读取MT6835磁编码器,并提供了21个实战细节与避坑指南。从硬件连接、SPI配置到数据解析和实时调试,全面解析了读取位置信息过程中的常见问题及解决方案,帮助工程师在工业控制、伺服电机等场景中高效应用AMR技术。

weixin_30729609的博客 1439

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

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

qq_45787691的博客 6400

ENVI5.6 自动化流程:GF系列卫星影像批处理与质量优化

本文详细介绍了如何利用ENVI5.6构建针对GF-2、GF-6、GF-7系列卫星影像的自动化批处理流水线。通过配置Batch Processing工具,实现从正射校正到图像融合的全流程批量处理,并分享参数设置、质量监控与故障排查的实战经验,旨在显著提升海量遥感影像的处理效率与成果质量。

efc1234567的博客 603

THUCNews新闻文本分类-tfidf+sklearn

本文使用的是和鲸社区现有数据集,代码也在和鲸社区公开,fork之后可以直接运行。 本文中所用的数据集清华NLP组提供的THUCNews新闻文本分类数据集的一个子集(原始的数据集大约74万篇文档,训练起来需要花较长的时间)。 本次训练使用了其中的体育, 财经, 房产, 家居, 教育, 科技, 时尚, 时政, 游戏, 娱乐10个分类,每个分类6500条,总共65000条新闻数据。项目在和鲸社区的平台上跑的,数据集直接引用了和鲸的数据集,每个分类6500条,总共65000条新闻数据。 数据集划分如下: cnews

wmq104的博客 4591

vue3集成electron

vue3 vue 集成 electron 白屏 打包

I_xuebi的博客 9037

Vitis Model Composer闪退?手把手教你用命令行启动Vivado 2021后的System Generator

本文详细解析了Vitis Model Composer闪退问题的根本原因,并提供了命令行启动Vivado 2021后System Generator的完整解决方案。从环境变量配置、组件缺失排查到权限问题处理,手把手教你通过命令行深度排错,并分享高级自动化脚本和系统优化技巧,帮助开发者高效使用Vitis Model Composer与System Generator进行HDL开发。

weixin_26905487的博客 348

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

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

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

PIMPL 模式 以及Q_DECLARE_PUBLIC 与 Q_DECLARE_PRIVATE

在 C++ 中,PIMPL 模式通常通过将类的私有数据和实现放在一个单独的类中,然后在类的公共接口中使用指向该私有实现类的指针来实现。宏可以帮助在 Qt 的 PIMPL 模式中实现类的私有实现和公共接口的分离,提高代码的封装性和可维护性。宏的结合使用,我们可以实现类的私有性和封装,避免暴露私有实现的细节,同时提高类的可维护性和灵活性。:这一行声明了一个友元类,使得类的公共接口可以访问私有实现类的私有成员。:这一行声明了一个友元类,使得类的私有实现可以访问类的私有成员。是两个宏,用于实现 PIMPL 模式。

追赶时代的博客 844

手把手教你 RT-DETR 添加注意力机制 | 一次性添加 20+ 种!

手把手教你 RT-DETR 添加注意力机制 | 一次性添加 20+ 种!

Coding... 2851

【架构】vue-cli集成electron

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

zyy_333的博客 1512

GStreamer中h264parse元素

h264parse是 GStreamer 中处理 H.264 视频流的关键元素,主要负责解析和准备 H.264 流以便后续处理。

深之JohnChen的专栏 1022

[ 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

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

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

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

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

默认即可

家有喜娟儿的博客 1万+

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

使用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、付费专栏及课程。

余额充值