记录- vue新建项目+electron打包桌面软件

1.node.js 安装好的情况下 安装脚手架vue-cli

npm install -g @vue/cli  (安装失败的话给"@vue/cli" 加上引号试试)

2.创建项目

   vue create 项目名 (然后是一堆英文选项是否生成router之类的。参考下面博客)

3.进入项目根目录（electron-vue-helloworld），然后执行下列命令：

　vue add electron-builder

　这个时候会安装electron-builder的依赖，可能比较耗费时间，请大家耐心等待，安装完成后会出现以下选型：

? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0

　这一步是选择Electron的版本，我们这里选择最新版本6.0.0，等待安装完成即可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为"main": "background.js"

　至此，所有的安装都已经完成了，接下来我们就可以运行程序看效果了。

注：这些安装可能会失败，请再执行一次。(我第一次装都没成功)

4.执行以下命令，运行程序

　npm run electron:serve

　在启动的时候，会启动很久，并出现以下信息

INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times

　这是在安装vuejs devtools，由于网络问题，一直安装不上。重试5次之后就会自动跳过并且启动程序。

　编译成功后，会自动弹出一个桌面程序，如下图所示

 

 

备注：跑别人的vue项目 删除“node_modules”文件夹和“package-lock.json”

 

参考链接：https://www.cnblogs.com/ippcode/p/12424826.html