3.2 新建 electron-main/window.ts 文件 前面的 index.ts 只是主进程的入口文件,接下来我们需要编写真正创建窗口、创建托盘、监听事件等方法的文件了:window.ts。 这个文件我们主要编写以下几个函数: getWindow(id: number):获取当前窗口 createWindows(options: object):创建新的窗口 createTray():创建系统托盘 liste...
该包主要是为了方便我们开发和调试electron,可以去官网详细了解:electron-devtools-installer。 安装vite-plugin-electron: npm install vite-plugin-electron -D 该包集成了Vite和Electron,比如使用它之后可以让我们方便的在渲染进程中使用Node API或者Electron API,详细使用用法可以去官网学习:vite-plugin-electron。 安装r...
所以我们需要修改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...
在渲染进程中我们使用@vueuse/electron模块方便的进行主进程与渲染进程之间的通信,比如我们打开一个新窗口,可以像如下写法。 代码如下: <template>打开新窗口</template>import { useIpcRenderer } from "@vueuse/electron";const ipcRenderer = useIpcRenderer();const openNewWin = () => {ipcRenderer.send("...
1.初始化vue3项目 2.安装electron、electron-win-state 3.根目录新增main.ts文件 4.package.json文件新增入口文件,和执行...
entry:"electron-main/index.ts",//主进程文件}), electronRenderer(), ], build: { emptyOutDir:false, }, 修改tsconfig.json "include": [..., "electron-main/**/*.ts"] 修改package.json "scripts": { ...,"dev": "vite --mode development","build": "rimraf dist && vite build && elec...
要将现有的Vue 3 + TypeScript + Vite项目集成到Electron中,你可以按照以下步骤进行: 1. 安装Electron及相关依赖 首先,你需要在你的Vue 3项目中安装Electron及其相关依赖。打开终端,在项目根目录下运行以下命令: bash npm install electron --save-dev 同时,你还需要安装electron-builder来简化打包过程: bash npm...
vue3 + ts + electron项目搭建过程 1、输入指令 npm create electron-vite 2、工程创建好后进入工程目录 执行 npm i 加载依赖项, 加载过程中可能会出现加载失败的问题,是因为github资源的问题,非项目本身问题,多执行几次即可 3、打包 输入npm run build,打包过程也会出现打包失败的问题,原因和上面一样,也是...
1. 搭建vite+vue-ts的项目 yarn create vite@ vuets_electron --template vue-tscd./vuets_electron yarn install && yarn dev AI代码助手复制代码 2. 接入electron 为了保证electron能够正常安装,在vuets_electron的根目录下创建.npmrc, 设置一下electron的镜像源 ...
本文包括vue3的基础环境搭建和electron配置,全TS。全部技术栈为:vue3+ts+antdv+vite+electron。 由于electron配置相对简单,我们先配置好vue再配置electron。 vue3环境搭建 由于我们使用vite,直接执行npm init vite ${项目文件夹} -- --template vue即可,会自动生成模板项目,然后进去执行npm install。可以看到,这个模...