一份针对于electron-vue项目整理的搭建、运行、打包过程的踩坑总结分享
首先为了保证安装效率，采用cnpm或者yarn指令来安装，前提是安装了node环境
安装全局yarn，最好设置淘宝镜像
npm install -g yarn
安装全局vue-cli
npm install vue-cli -g
安装3.0+版本vue-cli（现在最新已经到4.5.6版本）
npm install @vue/cli -g
若想更新vue-cli到最新版，要先卸载当前版本
npm uninstall vue-cli -g
创建electron-vue项目（方法一）：
1、安装2.0+版本vue-cli
npm install vue-cli -g
2、cmd打开F盘输入指令
vue init simulatedgreg/electron-vue my_project_name
根据自己项目需要设置项目内容
1.png
安装完成之后，项目导入编辑器，目录结构如下
2.png
3、yarn安装项目依赖
yarn install
时间长一点，耐心等待......
3.png
4、运行项目
npm run dev
看到可视窗口
4.png
5、项目打包
npm run build
下图中需要下载这个文件包，但是下载过程很漫长
5.png
打开连接下载压缩包
https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.4.0
6.png
之后压缩在C盘目录
C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
再次打包，如见下图，则打包成功
7.png
打开项目build文件，就会看见 .exe安装包
和普通安装程序一样双击打开安装
8.png
创建electron-vue项目（方法二）：
1、升级vue-cli到3.0+版本，先卸载当前版本
npm uninstall vue-cli -g
npm install @vue/cli -g
2、同样cmd指到D盘，安装vue项目
vue create my_electron_vue
根据需要选择项目配置
9.png
如见下图，则安装成功
10.png
3、安装electron-builder
进入项目文件my_electron_vue，执行如下指令
vue add electron-builder
11.png
选择最新9.0.0
12.png
安装成功后，项目结构如下
main.js为vue主文件
background.js为electron的主进程文件
13.png
4、项目打包
npm run electron:build
打包成功
14.png
进入项目文件夹dist_electron中，electron_robot_client Setup 0.1.0.exe为项目安装程序
15.png
总结：
第一种方法框架更新较慢，在打包问题上需要从git上下载额外工具，时间成本较高
第二种方法比第一种更前卫，实现的方法也比较简单
推荐使用第二种方法
