一、环境搭建

1、先用vueCli脚手架创建一个自己的项目

2、执行npm install --save-dev electron，安装electron

这里说明下，一定要改为淘宝镜像，不然慢到令人发指。哪怕改为淘宝镜像之后也会有一个插件大约61M，只有25KB。崩溃。

3、用vue ui命令进入自己的项目（简书操作：https://www.jianshu.com/p/dfcf2a6a497c）

找到插件位置，点击添加插件,找vue-cli-plugin-electron-builder，点击该插件，进行安装。

vue-cli-plugin-electron-builder：官网：https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/

这个插件本身是electron-bulider，所以需要两个网站项目结合着看。

如果你用的是vue ui安装那么注意这里会遇到一个61M的包，下载速度23kb样子。遇到就慢慢等吧。改镜像也无解。失败就多来两次。等这个包安装完成之后，vue ui会提示安装下一步的操作。

如果是npm包，我没用过。看官方就是vue add electron-builder就行了。

4、完整的安装完成之后你的packjson是这样的

{
  "name": "vue_visualization",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "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"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.4.4",
    "element-ui": "^2.13.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "electron": "^7.1.7",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.19.1",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-electron-builder": "^1.4.4",
    "vue-template-compiler": "^2.6.10"
  }
}

5、运行

开发：electron:serve

打包：electron:build

二、个人开发目前进度

1、内部文件情况

在开发的时候呢和传统vue项目差别基本上可以说是没有。

但是会多出来一个background.js，这个其实是electron的主进程部分。

electron分为渲染进程和主进程两个。其实说白了就是一个是你得start.js启动js和你的浏览器。不过两者之间是进程得关系。也不用担心不互通，electron是有互通方式得。

2、自定义你的边框

在background.js中的createWindow函数改为如下

win = new BrowserWindow({
  width: 1000,
  height: 600,
  minWidth: 1000,
  minHeight: 600,
  frame: false, //是否显示自带边框
  movable: true, //可否移动
  backgroundColor: '#f9f9f9',
  webPreferences: {
    nodeIntegration: true,
  },
});

代码就是字面意思。关键在于frame部分，但是这样设置之后你就没法拖动程序了。

这时候你在自己定义的头部增加这个css

-webkit-app-region: drag;

同时会引发另一个问题，这里不会触发鼠标事件。那么你对下面的单个元素增加

-webkit-app-region: no-drag;

这样就可以了。

2、在浏览器窗口打开f12开发者工具

这里使用了远程通信的方式。不是icp方式。是官方提供的

remote

然后我在页面的代码是这样的

const { BrowserWindow } = require('electron').remote;
f12() {
      let focusWin = BrowserWindow.getFocusedWindow();
      focusWin && focusWin.toggleDevTools();
    },

3、自定义关闭，缩小等

没写……

因为不知道为啥开发着，给我提示electron模块没有。然后我现在把包删除了。在重新下载包。慢死了