汇总electron的使用方法

• electron-quick-start + vue
• vue cli + electron
• vue-electron
• quasar + electron
• vue-cli + vue-cli-plugin-electron-builder

一、electron-quick-start + vuecli

在electron官网中提供一个快速创建electron 项目的模板electron-quick-start (opens new window)

1、clone 模板到本地
2、使用npm install安装包（electron安装缓慢）
3、使用npm run start 就可以启动项目，测试是否安装成功
4、使用vue-cli创建一个vue项目，然后打包到dist目录下
5、修改main.js中加载页面的路径 mainWindow.loadFile('dist/index.html')

二、vue-cli + electron

这个方法和第一个方法其实很相似

1. 使用vue cli 创建一个vue 项目
2. 使用 npm install --save-dev electron electron-packager安装包
3. 在根目录中添加一个render.js
4. 修改package.json 的入口 main: "render.js"
5. 添加启动命令 "start": "electron ."
6. 在render.js 中加载路径改为 mainWindow.loadURL("http://localhost:8080")
   render.js复制electron-quick-start里面的main.js文件内容，只是加载路径由文件改为url地址。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "electron .",
    "packager": "electron-packager ./ myapp --out ./OutApp  --overwrite "
  },

使用npm start可以运行 npm run packager可以打包，但是这种打包相当于打包一个浏览器空壳，打开这个url而已，关闭服务之后就为空了。 所以render.js还是要设置mainWindow.loadFile('./dist/index.html')

vue.config.js先设置publicPath:'./'
然后npm build打包就可以了

三、vue-electron

这个库好久没更新了，好像现在用这个的多vue-cli-plugin-electron-builder Public (opens new window)