记一次失败的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弹框

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

相关推荐
苹果酱05671 分钟前
python3语言基础语法整理
java·vue.js·spring boot·mysql·课程设计
边洛洛19 分钟前
对Electron打包的exe文件进行反解析
前端·javascript·electron
朝阳3924 分钟前
Electron Forge【实战】阿里百炼大模型 —— AI 聊天
electron
2501_9153738824 分钟前
怎样学习Electron
javascript·学习·electron
绅士玖1 小时前
Vue.js 小知识点大揭秘:提升开发效率的实用技巧
前端·vue.js
拖孩2 小时前
【Nova UI】十四、打造组件库之按钮组件(下):按钮组组件的构建之旅
前端·javascript·vue.js
Rudon滨海渔村2 小时前
[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等
前端·vue.js·uni-app
Watermelo6173 小时前
Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush.
前端·javascript·vue.js·elementui·html·es6·bug
一城烟雨_10 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
涵信12 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化