利用electron和electron-builder把前端web项目生成桌面程序

关于electron，有兴趣的可以百度了解一下。
为什么要写这篇文章呢？
因为百度到的相关教程几乎也是作者摸索出来，只知道怎么做，却没具体说为什么这样，而且没有总结，还到处是坑。

我的方法就是自动化：自动选择安装electron和electron-builder的版本。而不是像他们那样，自己做教程的时候是某个版本，但是到了你按他思路做，安装的确实另外的版本，给你留下很多坑。

先做一下总结：
1 设置好用到的插件的淘宝镜像
2 搭建electron项目（index.html，main.js，package.json）
3 安装electronhe 和electron-builder环境（注意一下：安装的时候别改写你的package.json，避免到时候打包程序的时候会把环境打包进去，造成打包后的项目太大）
4 cmd下运行预览和打包脚本。（我个人设置的是npm run view 和npm run build，具体按照自己的喜好在package.json下设置）

设置淘宝镜像

1 确定自己电脑安装有npm（或者cnpm或者yarn）
2 设置npm镜像（因为打包过程中会下载插件安装，如果没有设置镜像，直接从gihub下载，几乎会卡死）
3 cmd下运行：

npm config edit

把一下两行代码复制，粘贴，保存。保存后关闭即可

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

建立electron工程文件

1 main.js

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const path = require('path')
if (process.mas) app.setName('Your Electron App Name')

let mainWindow

function createWindow () {
   
  let windowOptions = {
   
    width: 1220,
    height: 780,
    minWidth: 1220,
    minHeight: 780,
    title: app.getName()
  }

  if (process.platform === 'linux') {
   
    windowOptions.icon = path.join(__dirname, '/dist/icon.ico')
  }

  mainWindow = new BrowserWindow(windowOptions)
  mainWindow.loadURL(path.join('file://', __dirname, '/dist/index.html'))

  mainWindow.on('closed', function () {
   
    mainWindow = null
  })
}

app.on('ready', function () {
   
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu) // 设置菜单部分
  createWindow()
})

app.on(