创建项目
# 安装 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
打开百度
...
import { ipcRenderer } from 'electron'
...
openUrl (event) {
var linkUrl = event.srcElement.href;
this.$electron.shell.openExternal(linkUrl);
},fs
...
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()
})
渲染进程
...
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;
}