electron+vue全家桶开发包含(心得，遇见的坑，解决办法等）

  /* 个人认为electron的难点的主要就是 主进程和渲染进程之间的通信， 
	其次就是关于electron的api了，接下来我们一起来揭开这个小东西的神秘面纱吧！！ 
 */

    1.   const { app, BrowserWindow } = require('electron')
    2.  
    3.   function createWindow () {
    4.	  const win = new BrowserWindow({
    5.	    width: 800,
    6.	    height: 600,
    7.	    webPreferences: {
    8.	      nodeIntegration: true
    9.	    }
    10.	  })
    11.	
    12.	  win.loadFile('index.html')
    13.	  win.webContents.openDevTools()
    14.	}
    15.	
    16.	app.whenReady().then(createWindow)
    17.	app.on('window-all-closed', () => {
    18.	  if (process.platform !== 'darwin') {
    19.	    app.quit()
    20.	  }
    21.	})
    22.	
    23.	app.on('activate', () => {
    24.	  if (BrowserWindow.getAllWindows().length === 0) {
    25.	    createWindow()
    26.	  }
    27.	})
    28.	

 const electron = require('electron')

    const { BrowserWindow } = require('electron')
   const win = new BrowserWindow()

	// 在主进程中
	const { ipcMain } = require('electron')
	ipcMain.handle('exper-action', (evidence, ...args) =>
	  // ... 代表渲染器操作
	})

	// 在渲染过程中
	const { ipcRenderer } = require('electron') 
	ipcRender.invotrake('exper-action', ...args)

// 渲染进程代码如下 
	<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <!-- <el-button class="btnOut" @click="handleOutWeb" type="text">操作说明</el-button> -->
        <div class="rightEdit">
          <i title="最小化" class="el-icon-minus" @click="min"></i>
          <i :title="title" :class="changeClass" @click="max"></i>
          <i title="关闭" class="el-icon-close" @click="close"></i>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
let ipcRenderer = require('electron').ipcRenderer;
export default {
  name: "Navbar",
  data() {
    return {
      changeClass: "el-icon-full-screen",   // el-icon-copy-document  最小化窗口
      title: "全屏"
    };
  },
  methods: {
    min(){
      //发送最小化命令
       ipcRenderer.send('window-min');
    },
    max(){
         //发送最大化命令
        ipcRenderer.send('window-max');
        if (this.changeClass === 'el-icon-full-screen') {
           this.changeClass = 'el-icon-copy-document'
           this.title ="最小化"
        }else{
          this.changeClass = 'el-icon-full-screen'
           this.title ="全屏"
        }
    },
    close(){
          //发送关闭命令
        ipcRenderer.send('window-close');
    }
  }
};
</script>
<style lang="scss" scoped> ....
</style>

// 在main 文件夹下的 index.js 中 
//引入
 let ipcMain = require('electron').ipcMain;
// 通过命令进行判断 

//接收最小化命令
ipcMain.on('window-min', function() {
  mainWindow.minimize();
})
//接收最大化命令
ipcMain.on('window-max', function() {
  if (mainWindow.isMaximized()) {
      mainWindow.restore();
  } else {
      mainWindow.maximize();
  }
})
//接收关闭命令
ipcMain.on('window-close', function() {
  mainWindow.close();
})

  mainWindow = new BrowserWindow({
    height: 700,
    useContentSize: true,
    maximizable: false, // 默认不能最大化
    width: 1000,
    // resizable: false,
    frame: false,  // 去除自带导航 
    show: false //消除启动时白屏 ， 如果想做启动页效果的话会用到
  })

.titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

 <template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <!-- <el-button class="btnOut" @click="handleOutWeb" type="text">操作说明</el-button> -->
        <div class="rightEdit">
          <i title="最小化" class="el-icon-minus" @click="minimizeWin"></i>
          <i :title="title" :class="changeClass" @click="maximizeWin"></i>
          <i title="关闭" class="el-icon-close" @click="closeWin"></i>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { remote } from "electron";
export default {
  name: "Navbar",
  data() {
    return {
      changeClass: "el-icon-full-screen",
      title: "全屏"
    };
  },
  methods: {
    minimizeWin() {
      remote.getCurrentWindow().minimize();
    },
    maximizeWin() {
      // 如果已处于最大化则恢复
      if (remote.getCurrentWindow().isMaximized()) {
        remote.getCurrentWindow().restore();
        this.changeClass = "el-icon-full-screen";
        this.title = "全屏";
      } else {
        remote.getCurrentWindow().maximize();
        this.changeClass = "el-icon-copy-document";
        this.title = "向下还原";
      }
    },
    closeWin() {
      remote.getCurrentWindow().close();
    }
  }
};
</script>
<style lang="scss" scoped>
...
</style>

//let whiteListedModules = ['vue'] 
//将这行修改为下面的的内容
let whiteListedModules = ['vue', 'element-ui']

import { remote , shell } from "electron";
// 点击事件 
handleOutWeb(){
shell.openExternal(
       "https://www.baidu.com"
      );
}

vue init simulatedgreg/electron-vue my-project

npm install element-ui -s

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)