一、利用脚手架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