前端时间我的一个朋友为了快速熟悉Vue3开发, 特意使用electron+vue3+ts开发了一个桌面端应用, 并在github上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末尾我会放github的地址, 大家如果想学习vue3 + ts + electron开发, 可以本地clone学习参考一下. image.png 技术栈 以上是我们看到的便签软件使用...
打包electron项目 npm run build 或通过以下指令来打包对应的平台包 如果卡在download提示github的网络问题导致打包失败,则自己根据报错提示链接先下载对应的包,再手动放到对应的目录即可,以下是各平台对应的目录: Linux: $XDG_CACHE_HOME or ~/.cache/electron/MacOS:~/Library/Caches/electron/Windows:%LOCALAPPDATA%...
以下是一个详细的步骤和代码示例,用于展示如何在Vue组件中触发目录扫描,并在Electron的主进程中执行扫描操作。 步骤一:在Electron主进程中设置IPC通信 首先,在Electron的主进程中(通常是background.js或main.js),你需要设置IPC(进程间通信)监听器来接收来自Vue组件的请求,并执行目录扫描。 typescript // main.ts ...
我们都知道Electron项目分为了主进程和渲染进程,主进程其实就是我们的Electron,渲染进程就相当于我们的Vue项目。 3.1 新建主进程 为了方便修改代码和查看,我们在项目根目录新建主进程文件夹electron-main,然后在其目录下新建index.ts文件,编写主进程代码。 代码如下: // electron-main/index.ts import { app, Browser...
针对于我们当前的 Electron+Vue3+TS 项目,主要实现以下需求。 需求如下: 在渲染进程中,直接调用某个方法即可打开新窗口。 默认打开的新窗口是一个子窗口。 打开新窗口方法可以接收参数。 可以传入路由地址,新窗口渲染此路由地址页面。 可以传入窗口样式,如宽高、背景色、是否显示默认菜单栏等等。
新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的vue项目路径const localAddress = "http://localhost:5173";//创建一个新的窗口const createWindow = () =>{ const win=newBrowserWindow({ ...
要搭建一个使用Electron+Vue3+TypeScript的桌面端应用并支持热更新，可以按照以下步骤进行：安装与配置：使用vuecli创建一个Vue3项目，并在创建过程中选择TypeScript作为开发语言。如果尚未安装vuecli，需要先全局安装它。安装Electron：根据electronbuilder官方文档，选择适合自己项目的Electron版本进行安装。例如，...
针对于我们当前的Electron+Vue3+TS项目,主要实现以下需求。 需求如下: 在渲染进程中,直接调用某个方法即可打开新窗口。 默认打开的新窗口是一个子窗口。 打开新窗口方法可以接收参数。 可以传入路由地址,新窗口渲染此路由地址页面。 可以传入窗口样式,如宽高、背景色、是否显示默认菜单栏等等。
打包后由于electron的缓存导致打开需要10秒左右,清除c盘软件缓存后正常 其他的不记得了。。 这里暂时不提供vue3和electron介绍,有需要的可以先看看社区其他的有关文章或者后期再详细专门提供。软件命名为i-notes。 vue3中文教程 vue3js.cn/docs/zh/gui…[1] electron教程 www.electron...
main/index.ts: functionFunQuit():void{app.quit();// 退出应用程序}app.whenReady().then(()=>{ipcMain.on('quit-app',FunQuit)createWindow()}) preload/index.ts: contextBridge.exposeInMainWorld('electronAPI',{quit:()=>ipcRenderer.send('quit-app'),}) ...