最近公司业务需要做一个桌面端，开始研究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这个命令吧。（但是要怎么去修改我不太知道，哪位大哥可以告诉我？）

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

成功篇：

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

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

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