npm install -Dvite-plugin-electron 创建项目入口——主进程 electron引入成功了,可以开始写electron的相关代码了,新建一个src-electron文件用来写electron的代码,在它下面创建一个main.ts文件 用来写主进程代码 // src-electron/main.js const { app, BrowserWindow } = require('electron') const { join } = ...
所以我们需要修改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/rendere...
创建项目可参考:vue3+ts项目构建 安装electron相关依赖 npm install -D electron electron-builder electron-devtools-installer vite-plugin-electron vite-plugin-electron-renderer rimraf 新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的...
简介: 使用vue3+vite+electron构建小项目介绍Electron进程间通信 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。
我们需要先借助Vite初始化一个Vue3+TS的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。
electron.vite.config.ts ==》这个和vue中的vite.config.js || vue.config.js类似安装路由安装路由:npm install vue-router -S新建:router/index.jsrouter/index.js写入内容import { createRouter, createWebHashHistory } from "vue-router";export default createRouter({...
1.初始化vue3项目 2.安装electron、electron-win-state 3.根目录新增main.ts文件 4.package.json文件新增入口文件,和执行...
Vue3 + vite + Ts + pinia + 实战 + 源码 + electron 128.2万播放 小满Vue3(课程导读) 02:48 小满Vue3(第一章 Vue3概述-梦开始的地方) 07:15 小满Vue3(第二章 环境搭建 底层介绍) 13:02 小满Vue3(第三章 认识目录&SFC&插件) 06:44 小满Vue3(第四章 模板语法 & vue指令) 19:11 小满Vue3...
开发环境启动electron 我们希望npm run dev的时候直接把electron也启动起来而不是开两个启动一次vite再启动一次electron 第一步我们需要先建立一个文件夹 在根目录创建一个plugins编写vite插件帮我们启动electron plugins vite.electron.dev.ts //编写electron开发模式 ...
所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问题 这对于web项目来说问题不大,但对于我们的Electron项目来说,就影响很大了 今天我就把这个思路和实现方式的关键代码发出来供大家参考, ...