前端时间我的一个朋友为了快速熟悉Vue3开发, 特意使用electron+vue3+ts开发了一个桌面端应用, 并在github上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末尾我会放github的地址, 大家如果想学习vue3 + ts + electron开发, 可以本地clone学习参考一下. image.png 技术栈 以上是我们看到的便签软件使用...
在渲染进程中我们使用@vueuse/electron模块方便的进行主进程与渲染进程之间的通信,比如我们打开一个新窗口,可以像如下写法。 代码如下: <template>打开新窗口</template>import { useIpcRenderer } from "@vueuse/electron";const ipcRenderer = useIpcRenderer();const openNewWin = () => {ipcRenderer.send("...
在path内新建'%VUE_CLI3'%'。 创建v3 + ts 项目 进入项目文件夹根目录 vue3createelectron-vue3-ts 选择Manually select features: 选择3.x: 最终配置如下: 执行成功: 之后可以根据提示运行,验证安装 cd.\electron-vue3-ts\npm run serve 命令行效果: 浏览器效果: vue3集成Electron 安装集成: npminstallvue...
electron引入成功了,可以开始写electron的相关代码了,新建一个src-electron文件用来写electron的代码,在它下面创建一个main.ts文件 用来写主进程代码 // src-electron/main.js const { app, BrowserWindow } = require('electron') const { join } = require('path') // 屏蔽安全警告 // ectron Security Warnin...
创建electron项目(快捷指令,尽量不要先创建vue3项目再安装electron并配置,超级麻烦且容易很多坑) cnpm create electron-vite cnpm i 或 cnpm create @quick-start/electron@latest 打包electron项目 npm run build 或通过以下指令来打包对应的平台包 如果卡在download提示github的网络问题导致打包失败,则自己根据报错提示...
这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。 2.安装Electron相关包 初始化一个基本项目后,我们需要在项目中安装一些关于electron的包。 安装electron: npm install electron -D 如果你安装electron不成功,建议使用cnpm安装。 安装electron-builder: npm install electron -D 主要利用electron-builder...
针对于我们当前的 Electron+Vue3+TS 项目,主要实现以下需求。 需求如下: 在渲染进程中,直接调用某个方法即可打开新窗口。 默认打开的新窗口是一个子窗口。 打开新窗口方法可以接收参数。 可以传入路由地址,新窗口渲染此路由地址页面。 可以传入窗口样式,如宽高、背景色、是否显示默认菜单栏等等。
Electron应用程序由一个主进程和一个或多个渲染进程组成。我们首先创建一个Electron主进程,用于处理应用程序的主要逻辑。 创建一个新的main.ts文件,并添加以下代码: import{app,BrowserWindow}from'electron';functioncreateMainWindow(){constwin=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:tru...
在Vue 3和TypeScript项目中集成Electron并实现窗口圆角,可以按照以下步骤进行: 1. 在Vue 3+TypeScript项目中集成Electron 首先,你需要创建一个Vue 3和TypeScript项目,并集成Electron。这通常涉及以下步骤: 使用Vue CLI创建一个Vue 3项目,并选择TypeScript支持。 安装Electron和相关依赖。 配置Electron主进程和渲染进程。
小满Vue3(第三十九章 electron桌面程序) 32:11 小满Vue3(第四十章 Vue3.3编译宏) 18:01 小满Vue3(第四十二章 环境变量) 11:44 小满Vue3(第四十三章 webpack 从0到1 构建vue3) 28:30 小满Vue3(第四十四章 Vue3高级性能优化) 15:37 小满Vue3 (第四十五章 web Components) 11:14 小满Vue3(第四十六章...