记一次失败的vue3+electron项目搭建过程

最近公司业务需要做一个桌面端,开始研究electron框架,因为之前都是用vue,所以想自己搭建一个vue+electron的小demo,这里的vue采用vue3。

失败篇:

首先创建一个名叫electron-vue的项目:

npm create vue@latest

创建后就是一个普普通通的vue项目,这里没什么可说的,可以直接参考vue文档。然后往vue项目里引入electron,这里就开始有问题了。

首先我用的是npm install electron --save-dev命令,直接报错:

看了下electron官网,发现可能是镜像的问题,在目录下创建了一个.npmrc文件,里面配置了镜像:

然后再去执行npm install electron --save-dev,就成功了,package.json里也有了electron。但是引入之后该怎么办呢?就没有思路了(求大佬给我指导一下!)。

又去百度了一下其他人的方式,发现很多人引入electron用的不是npm install electron --save-dev直接在项目中引入electron,而是通过vue add vue-cli-plugin-electron-builder命令安装vue-cli-plugin-electron-builder插件,于是我删除了刚刚引入的electron,准备试一下:

卸载成功,但是执行vue add vue-cli-plugin-electron-builder时报错了:

搜了下发现,这个指令是需要安装过vue/cli之后才行的,于是安装vue/cli后再次执行vue add electron-builder,中间遇到需要选择的情况直接回车,执行成功:

此时package.json里是这样的:

目录里也多了个background.js文件,看样子是electron的入口文件:

尝试执行npm run electron:serve,提示如下:

想了想,大概是因为我的项目不是通过vue/cli,而是npm包搭建的vue项目,所以不能识别vue-cli-service这个命令吧。(但是要怎么去修改我不太知道,哪位大哥可以告诉我?)

事实证明,成功的方式基本只有一种,但是失败的情况多种多样。放弃了这条路,准备跟着网上大多数人的方案走。

成功篇:

想明白了之后直接整个项目都删了,从头再来。过程其实就是三步:

js 复制代码
执行 vue create my-electron-vue-demo  成功后下一步
执行 vue add vue-cli-plugin-electron-builder 成功后下一步
执行 yarn electron:serve 成功后会弹出一个electron弹框

怎么说呢,这个项目搭建的感觉就是,我可真是个小垃圾啊😭😭

相关推荐
揣晓丹2 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
顽疲3 小时前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai
派小汤4 小时前
Springboot + Vue + WebSocket + Notification实现消息推送功能
vue.js·spring boot·websocket
阿珊和她的猫5 小时前
Webpack Dev Server的安装与配置:解决跨域问题
vue.js·webpack
醋醋5 小时前
Vue2源码记录
前端·vue.js
艾克马斯奎普特5 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
敲代码的玉米C5 小时前
Vue Draggable 深入教程:从配置到实现的完整指南
vue.js
frontDeveloper6 小时前
Vue3基础使用概览
vue.js
frontDeveloper6 小时前
Vue2基础原理概览
vue.js
frontDeveloper6 小时前
Vue2基础使用概览
vue.js