一、利用脚手架cli搭建一个vue项目
详情请访问如下地址：
https://www.jianshu.com/p/582e0c5da051
二、添加淘宝 electron 源（解决 electron-builder下载慢、打包慢的问题）
对于win系统，可以修改全局变量，很简单。新建用户全局变量即可。
如下所示：名称为 ELECTRON_MIRROR，值为： http://npm.taobao.org/mirrors/electron/ 。
2.1、分别执行如下两个命令
//npm设置淘宝镜像
npm config set registry https://registry.npm.taobao.org/
//electron添加淘宝镜像
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
image.png
2.2、重新打开一个cmd命令窗口
注意，保存之后，要重新打开一个命令行窗体，这些全局变量才会生效！马上体验一下刷刷下载的感觉吧~
三、安装electron-builder
electron-builder是一个开箱即用的构建跨平台electron桌面应用的解决方案
3.1、进入项目根路径输入cmd回车
image.png
3.2、输入以下命令安装
vue add electron-builder
image.png
3.3、选择版本
image.png
3.4、开始下载
由于我们安装了electron的淘宝镜像，下载速度非常快
3.4、如下提示安装成功
image.png
四、项目启动以及打包
4.1、在package.json我们可以看到如下代码
3、4两条命令分别用于我们electron的打包和运行
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
4.2、解决electron启动慢的问题
在src文件夹下面，找到background.js文件，删除如下代码
image.png
image.png
4.3、成功
image.png
4.4、打包也是非常快
image.png
