1.新建Vue项目
vue create app
![在这里插入图片描述](https://img-blog.csdnimg.cn/8ba3db7777d54493859710d25a332cd4.png)
2.运行项目
yann serve
3.安装electron插件
vue add vue-cli-plugin-electron-builder
![在这里插入图片描述](https://img-blog.csdnimg.cn/f8ecba6287b840809f0e9c3e2f37adbd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBASFRNTOWwj-eZveWRgA==,size_20,color_FFFFFF,t_70,g_se,x_16)
选择Electron版本
![在这里插入图片描述](https://img-blog.csdnimg.cn/38871b10d6a84255836dcb7c3e69e492.png)
这里需要等很久, 请耐心等待
或者可以将ELectron的镜像源改为 淘宝源
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
4.运行项目(必须先运行)
npm run electron:serve
![在这里插入图片描述](https://img-blog.csdnimg.cn/4eee82b78b164d6e9500603f73428b8d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBASFRNTOWwj-eZveWRgA==,size_20,color_FFFFFF,t_70,g_se,x_16)
到此为新建项目(克隆代码也要新建项目)
5.新建个文件夹 克隆项目
如果克隆项目和新项目的 以下三个文件不对应, 请以新项目为准
如果不对应 请把 新项目的版本号复制到 克隆项目内
![在这里插入图片描述](https://img-blog.csdnimg.cn/4e7f5dc909bd46c7a7b7b426c9723c05.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBASFRNTOWwj-eZveWRgA==,size_20,color_FFFFFF,t_70,g_se,x_16)
6.复制克隆项目文件到新项目
删除掉新项目的以下文件,把克隆项目的文件复制过来
![在这里插入图片描述](https://img-blog.csdnimg.cn/6287ce9ed454478c8f7b291a710c4f88.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBASFRNTOWwj-eZveWRgA==,size_20,color_FFFFFF,t_70,g_se,x_16)
7.初始化安装包
npm i
8.正式运行项目
npm run electron:serve
9.结束