上段代码主要是一个入口文件,我们把创建创建窗口、创建监听事件、创建系统托盘等操作都风窗到了 window.ts 文件中,这里重点理解下面三个方法: window.listen() window.createWindows({ isMainWin: true }) window.createTray(); 3.2 新建 electron-main/window.ts 文件 前面的 index.ts 只是主进程的入口文件,接...
要将现有的Vue 3 + TypeScript + Vite项目集成到Electron中,你可以按照以下步骤进行: 1. 安装Electron及相关依赖 首先,你需要在你的Vue 3项目中安装Electron及其相关依赖。打开终端,在项目根目录下运行以下命令: bash npm install electron --save-dev 同时,你还需要安装electron-builder来简化打包过程: bash npm...
在「vite.config.ts」中配置vite-plugin-electron插件入口 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ // 主进程入口文件 entry:...
所以我们需要修改vite.config.ts配置文件,以此将electron和vite项目结合起来。 代码如下: import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import * as path from "path";import electron from "vite-plugin-electron";import electronRenderer from "vite-plugin-electron/renderer";im...
创建electron项目(快捷指令,尽量不要先创建vue3项目再安装electron并配置,超级麻烦且容易很多坑) cnpm create electron-vite cnpm i 或 cnpm create @quick-start/electron@latest 打包electron项目 npm run build 或通过以下指令来打包对应的平台包 如果卡在download提示github的网络问题导致打包失败,则自己根据报错提示...
electron+vue3+vite+ts项目中使用svg图标 项目结构 1. 首先引入svg插件 1 2 3 yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D 2. 创建文件 1、创建icons文件夹,里面创建index.ts(svgicon的js逻辑),svg文件夹(svg图标存放的地址)...
main.ts App.vue background.ts //手动创建文件用于编写electron package.json tsconfig.json vite.config.ts background.ts import { app, BrowserWindow } from 'electron' // 等待Electron应用就绪后创建BrowserWindow窗口 app.whenReady().then(async () => { ...
1.置顶 全屏,退出,最小化 2.通信 3.electron实现点:开机自启,置顶窗口,黑夜模式,悬浮窗,用于定时提醒,优化的窗口拖动,优雅丝滑的改变窗口大小和位置显示界面,自定义安装,以及自定义图标,最小化,自定义托盘。 4.node 包管理工具nvp 1.vite.config.ts配置 https://blog.csdn.net/oBoLuoMi1/article/details/13...
针对于我们当前的Electron+Vue3+TS项目,主要实现以下需求。 需求如下: 在渲染进程中,直接调用某个方法即可打开新窗口。 默认打开的新窗口是一个子窗口。 打开新窗口方法可以接收参数。 可以传入路由地址,新窗口渲染此路由地址页面。 可以传入窗口样式,如宽高、背景色、是否显示默认菜单栏等等。
小满Vue3(第二十五章 tsx & vite插件) 21:28 小满Vue3(彩蛋) 02:58 小满Vue3(第二十六章组件( v-model & 源码解析) 13:24 小满Vue3(第二十七章 自定义指令) 07:46 小满Vue3(第二十七章-1 指令简写 鉴权) 07:43 小满Vue3(第二十七章-2 指令拖拽案例) 04:47 小满Vue3(第二十七章-3 图片懒加载)...