基于 vue-cli 配合 Electron 构建跨平台窗体项目

概述

最近突然冒出来一个思路。如果我构建了一个代理服务器，那么我可以在代理端就对http请求所得的页面进行增强操作(注入js)。像之前比如有刷课的想法，一般都是通过下载一个油猴巴拉巴拉好麻烦。那么我能否直接在代理端把这个操作给做了？

一顿巴拉巴拉，总之需要写一个客户端。用之前学的pyqt? 太无趣了。

之前一直想看Electron，没有项目可写就一直搁置。

这东西的主要作用就是使前端拥有调用系统级API的功能。比如，发起系统通知、IO操作...等等。配合前端的话，调用AntDesign、elementUi,不比qt好看多了嘛。不过坏处是，它本质上相当于封装了一个浏览器... 因此即使什么都不做，文件也会有几十m。

安装

首先通过vue-cli把项目都构建好。其后运行下面指令进行安装。

vue add electron-builder

安装完毕之后，使用下面指令运行。

yarn electron:serve

这样就可以了。值得注意的是，这篇博文是基于 vue-cli 进行的，所以与其他形式可能不同，它的入口文件是「src/background.js」。

入口文件

入口文件主要由以下代码构成。app是作为管理整个窗体事件的对象，而BrowserWindow则是管理窗体的对象。可以看到，在下面运行了 new BrowserWindow() 方法，其中 width 和 height 就代表窗体的长度和宽度。

而其后通过这个对象的 loadFile 方法载入了我们的前端页面。注意，这里的 index.html 在运行的时候打包工具会自动的进行打包。

const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}

烂尾了，等有空再填这个坑

原本是为了写一个项目，写着写着，嗯..觉得好像没卵用哈哈哈哈

基本使用

系统通知

本地配置项

多窗体

打包项目