研究基于Electron + Vue混合桌面应用开发自定义窗口时
需要在UI界面自定义窗口的最小化、最大化、关闭基本操作功能时，遇到的问题及即将方式

1.实验环境

// package.json
// 关键依赖：electron 、electron-builder
{
  // ... 
  "dependencies": {
  	// ...
    "vue": "^2.6.11",
    // ...
  },
  "devDependencies": {
  	// ...
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "deepmerge": "^4.2.2",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "vue-cli-plugin-electron-builder": "^2.1.1",
    "vue-template-compiler": "^2.6.11",
    // ...
  }
}

2.自定义Electron窗口实验问题及解决

参考资料：
【Electron-vue】创建桌面应用（14）- 自定义Electron窗口 --> 基于开源库electron-vue(已停止维护)

基于上面的参考资料，基本上可以实现布局、自定义拖动区域等
其中有一段代码，在实际应用中发现无法使用，例如：

 windowMin() {
  this.$electron.ipcRenderer.send("window-min")
 },

其中this.$electron在实验打印中默认是undefined

好不容易找的资料，就差临门一脚了，怎么能在这里就断送了…

于是顺着electron-vue开源库一探究竟，看它是如何实现在VUE内能进行this.$electron调用Electron接口的！！！

在blob/master/template/src/renderer/main.js [14-15行] 发现如下代码：

{{#isEnabled plugins 'vue-electron'}}
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
{{/isEnabled}}

顺藤摸瓜…

找到开源库 vue-electron (已停止维护)，研究了下代码的实现方式！其实很简单！

在VUE项目里，创建一个例如VueElectron.js的文件，内容如下：

const electron = require('electron')

module.exports = {
  install: function (Vue) {
    Object.defineProperties(Vue.prototype, {
      $electron: {
        get () {
          return electron
        },
      },
    })
  },
}

OK，有了VueElectron后，我们回到Vue的入口文件main.js里

import Vue from 'vue'
// ...
import VueElectron from '@/plugins/VueElectron'
// ...
Vue.use(VueElectron)
// ...

接下来就可以继续愉快的玩耍了！

扩展可能遇到的问题：

在vue中使用electron的模块出现：Uncaught ReferenceError: __dirname is not defined

// 在项目根目录中创建vue.config.js文件，添加以下内容
module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}