electron-vue 入门

介绍

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。

结构

electron分为两个进程，main和renderer进程

主进程(main)

1，BrowserWindow，创建窗口
function createWindow() {
    mainWindow = new BrowserWindow({    //创建接口
        width: 1000,
        height: 600,
        minWidth: 1000,
        minHeight: 600,
        useContentSize: true,
        // frame: false
    });
    mainWindow.loadURL(winURL);     //加载窗口url，来自renderer进程的页面
    app.on("ready", createWindow);   //app准备好时创建窗口
2，app方法模块
will-finish-launching：在应用完成基本启动进程之后触发
ready：当electron完成初始化后触发
window-all-closed：所有窗口都关闭的时候触发，在windows和linux里，所有窗口都退出的时候通常是应用退出的时候
before-quit：应用退出前触发
will-quit：即将退出应用时触发
quit：应用退出时触发
win.maxmize:：应用最大化
win.minmize: 应用最小化
hide: 当窗口隐藏时
close：窗口关闭
3，BrowserWindow常用配置
function createWindow(){
    mainWindow = nww BrowserWindow({
    width: 1000,        //宽
    height: 600,        //高
    minWidth: 1000,     //最小宽
    minHeight: 600,     //最小高
    show: true,         //创建后是否显示
    frame：false，        //创建后是否显示工具栏，可用于自定义工具栏
    fullscreenable：true，//是否允许全屏
    // ...以及其他可选配置
})
}
4，主进程与渲染进程通信时
下面是自定义工具栏，通过ipc实现窗口事件
主进程：监听minmize事件
import { ipcMain } from 'electron';
ipcMain.on('minimize', e => {
    mainWindow.minimize()
})
渲染进程：通过ipc方法，向主进程发送minmize方法
const {ipcRenderer: ipc} = require('electron');
ipc.send( "minimize" )

渲染进程(renderer)

renderer进程下目录及作用
assets：放置静态资源，如图片，视频，静态配置
common：放置静态js，如页面需要的公共功能
commponents：放置vue页面
router：放置页面路由
store： 放置公共模块，如vuex