electronvue基础

创建项目

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

渲染进程与主进程通信

主进程

// src\main\index.js

function createWindow() {require('./ipcMain.js')
}
app.on('ready', createWindow)

// src\main\ipcMain.js

var {ipcMain, BrowserWindow} = require('electron')
var mainWindow = BrowserWindow.getFocusedWindow()

ipcMain.on('toMain', (event, data) => {var printersList = mainWindow.webContents.getPrinters()
  event.sender.send('printersList', printersList)
})

渲染进程

//src\renderer\components\test.vue

import {ipcRenderer, BrowserWindow} from 'electron'
      this.$electron.ipcRenderer.send('toMain', 'aaaa')
      this.$electron.ipcRenderer.on('printersList', (event, data) => {console.log('printersList')
        console.log(data)
 })  

模块操作

shell

    <a href="http://www.baidu.com"
       @click.prevent="openUrl($event)"> 打开百度 </a>

... 


import {ipcRenderer} from 'electron'

...

    openUrl (event) {
      var linkUrl = event.srcElement.href;
      this.$electron.shell.openExternal(linkUrl);
    },

fs

<button @click='fs'>fs</button>

...

import fs from 'fs'

...

    fs () {fs.readFile('package.json', (err, data) => {if (err) {console.log(err);
          return;
        }
        console.log(data.toString());
      })
    }

引入 element-ui

安装依赖

npm i element-ui -S

配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

引入 scss

依赖

因为不用在页面中引入，所有用 –save-dev

cnpm install sass-loader node-sass --save-dev

自定义顶部菜单

隐藏顶部菜单

//src\main\index.js

app.on('ready',() => {mainWindow.setMenu(null)
})

隐藏顶部的导航 以及 最大化 最小化 关闭按钮

  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    frame: true // 去掉最顶部的导航 以及 最大化 最小化 关闭按钮
  })

自定义模拟顶部菜单

主进程

// src\main\ipcMain.js

var {ipcMain, BrowserWindow} = require('electron')

// 获取当前的窗口对象   BrowserWindow.getFocusedWindow();

var mainWindow = BrowserWindow.getFocusedWindow()

ipcMain.on('toMain', (event, data) => {var printersList = mainWindow.webContents.getPrinters()
  event.sender.send('printersList', printersList)
})

ipcMain.on('window-min', () => {console.log('window-min')

  mainWindow.minimize()})

ipcMain.on('window-max', () => {if (mainWindow.isMaximized()) {mainWindow.restore()
  } else {mainWindow.maximize()
  }
})

ipcMain.on('window-close', () => {mainWindow.close()
})

渲染进程

  <div id="myHeader">
    <div class="titlebtn">
      <div class="min"
           @click="min"> <img src="../assets/min.png"
             alt=""></div>
      <div class="max"><button @click="max"> [] </button></div>
      <div class="close"><button @click="close"> X </button></div>
    </div>
  </div>
    
   ...
   
       min () {this.$electron.ipcRenderer.send('window-min');
    },
    max () {this.$electron.ipcRenderer.send('window-max');
    },
    close () {this.$electron.ipcRenderer.send('window-close');

    }

定义导航可拖拽

myHeader {
可拖拽的 css:
-webkit-app-region: drag;
不可拖拽的 css:
-webkit-app-region: no-drag;
}