electron-vue使用及打包成桌面应用

1、创建electron-vue项目

vue init simulatedgreg/electron-vue ele-vue-first

其中ele-vue-first为项目名称

2、选择配置项

前面四个直接回车就行，第五个不用说了，第六个你看你项目里需要什么就勾选什么。后面的配置如下：

3 、踩坑重点（1）

我需要重点说一下最后一个配置项，挺坑的，我当时也是被难的挺久的：

这个配置说的是你这个项目需要什么工具进行build，下面选项提供了两项选择：builder和packager，因为我一开始是直接从GitHub下载的Demo，没有用到electron-vue，所以我当时使用的packager进行的项目build，然后进行electron-vue的时候我就先入为主的以为用packager也是可以的，但是我进行build的时候，生成的exe的程序双击打开一篇空白，然后我就上网查询，就看到了builder的build方式，一顿操作猛如虎，弄好之后启动项目一切OK，可是build的时候会一直卡到如下图：

如果你也是这样的警告的话，你可以按我下面的做，重建项目，勾选builder的build方式。

4 、踩坑重点（2）

如果你重建了项目，选择了builder，这个时候，你安装依赖的时候，会发现npm会很慢，你可能就会选择cnpm进行安装，然后往下启动项目正常，可到npm run build的时候，发现会如下的报错：

这个错误就是用cnpm进行安装的原因，你如果是的话，删依赖，用npm安装。

5、build（成功）

如果以上你都照做没有问题的话，你就可以npm run build了，

上图就是打包成功的样子，你如果是这样的话，就说明你一切ok，你就可以去找根目录的build文件夹里面的win-unpacked，然后里面有一个以exe为后缀的程序。这个就是你打包的桌面程序了！