起因
因最近工作需要做一个单页面的桌面端工具，于是打算使用Electron来开发，使用原装electron的话，配置是个大坑，估计有得折腾的。于是在社区上找了好久，发现能与Vue配合的开源项目少之又少，比较出名的也就是electron-vue了，但使用SimulatedGREG/electron-vue的话，版本太老（electron-vue使用的是vue-cli2...现在都4.x了），其配置包已经五年没有更新了。于是打算直接通过vue脚手架和electron-builder搞一个壳子写一下。
搭建
1. 使用 vue cli 创建vue项目
npm install -g @vue/cli //全局安装
vue create electron-test //创建项目
2. 安装插件 vue-cli-plugin-electron-builder
vue add electron-builder
接下来会让你选择版本，我们选择最新版本安装就行。
3. 安装完插件后, 项目中发生了一些变化
多了个background.js文件。
package.json新增了几个scripts。
安装注意踩坑（重点）
若在选择了electron版本执行安装的过程中报错electronECONNRESET或者install.js报错
执行以下代码后再次执行vue add electron-builder命令重试即可。
这也是Electron官网推荐的方法。
npm config set ELECTRON_MIRROR "https://cdn.npm.taobao.org/dist/electron/"
我使用了nrm换源 npm梯子本地代理都不行，但只需要上述指定该包的地址就行.... cnpm也可以安装，但不建议使用，因为其不能锁包lock且偶尔也会出现一些莫名其妙的问题。
启动
执行以下命令，启动成功
npm run electron:serve
若启动时出现Vue Devtools安装超时，是因为每次启动的时候项目会尝试使用Vue Devtools调试工具，但因为众所周知的原因一般安装不上去。这时等待它超时4次即可启动项目。
或者注释掉background.js里面的这两段代码：
若实在需要这个调试工具可尝试挂代理安装（参考上面安装builder时）或使用cnpm（调试工具而已，这个使用cnpm无所谓）安装。
打包
执行以下命令
npm run electron:build
执行成功之后 在目录下生成了dist_electron文件夹，打开.exe文件即可安装成功。
桌面也生成了对应的程序快捷方式。
