vue3已经正式发布一段时间了,2021一直想正式用起来但是一直忙也没有机会,乘着元旦放假,开始学起来吧,结合electron一起开发一个桌面端应用,两个一起学习。
搭建vue项目
既然用了vue3,那就顺便体验一下vite,用vite来进行项目配置
直接用vite官网推荐的命令进行项目初始化
yarn create vite my-vue-app
然后就是根据自己的喜好选择相关的配置
项目初始化完毕后,运行
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
执行完桌面就会出现一个应用了
这个时候我们如果修改electron的相关配置,会发现应用没有自动更新,我们需要加一点修改
安装一个插件
yarn add electron-reloader --dev
- electron-reloader 是一个支持electron热重载的插件
安装后我们在main.js中加入一段代码
try {
require("electron-reloader")(module);
} catch {}
这样我们的应用就可以进行热重载了。
到这里项目基本搭建完成。