Electron+vue3开发桌面端应用(一)

324 阅读2分钟

vue3已经正式发布一段时间了,2021一直想正式用起来但是一直忙也没有机会,乘着元旦放假,开始学起来吧,结合electron一起开发一个桌面端应用,两个一起学习。

搭建vue项目

既然用了vue3,那就顺便体验一下vite,用vite来进行项目配置

直接用vite官网推荐的命令进行项目初始化

yarn create vite my-vue-app

1641131263.png

然后就是根据自己的喜好选择相关的配置

项目初始化完毕后,运行 yarn dev 可以看到正常的界面就代表项目初始化成功了,相关的配置我们先不做修改,等后面需要了再一步步修改。

安装electron

接下来是electron的安装,执行下面命令

yarn add electron

安装上electron。

配置electron

配置electron,在项目最最开始的时候,我们只需要能正常运行起来,所以我们只做基础的配置,先在项目根目录新建两个文件,一个是main.js,一个是preload.js。

  • main.js 这个文件就是主进程文件
  • preload.js 这个文件是页面运行其他脚本之前加载的脚本,优先级很高,具有调用node的能力

preload.js 先简单写点东西,后面具体需要node的能力之后再进行修改

window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

然后是main.js

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });
  win.loadURL("http://localhost:3000/");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

从上面可以看出,main.js文件就是引进electron,然后创建窗口,进行窗口的配置,还有对整个应用的一些事件的监听。

同时在上面有一句代码win.loadURL("http://localhost:3000/");loadURL指向的就是我们的页面地址,我们先指向开发地址,electron还有另一个api,就是loadFile,这个函数参数则是文件路径,比如(index.html),到这里大家就明白了他的作用了,可以把打包完的html文件路径放到这里,但是我们为了开发方便,还是直接用url的形式先。

修改package.json

  • 添加"main": "main.js",指定入口文件
  • 增加脚本命令: "electron:start": "electron ."

启动项目

  • 运行vue项目yarn dev
  • 运行electron项目yarn electron:start

执行完桌面就会出现一个应用了

1641133142(1).png

这个时候我们如果修改electron的相关配置,会发现应用没有自动更新,我们需要加一点修改

安装一个插件

yarn add electron-reloader --dev

  • electron-reloader 是一个支持electron热重载的插件

安装后我们在main.js中加入一段代码

try {
  require("electron-reloader")(module);
} catch {}

这样我们的应用就可以进行热重载了。

到这里项目基本搭建完成。