Vue 3 + Vite 使用 Electron 搭建桌面应用是一个常见的组合。 Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架,它结合了 Chromium 和 Node.js,允许开发者使用前端技术创建跨平台的桌面应用。Vue 3 是一个流行的前端框架,而 Vite 是一个现代的前端构建工具,它们与 Electron 的结合可以极大地...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 "@vue/compiler-sfc":"^3.0.0","vite":"^1.0.0-rc.9","vue":"^3.0.2","vue-router":"^4.0.0-rc.1","electron":"^11.0...
在「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 + Vue 3 + Electron 项目结构。假设你已经安装了 Node.js 和 npm,接下来我们将一步步创建项目。 1. 初始化项目 # 创建项目文件夹mkdirvite-vue3-electron-expresscdvite-vue3-electron-express# 初始化 npm 项目npm init -y# 安装 Vite 和 Vue 3npm install vue@next n...
创建electron项目(快捷指令,尽量不要先创建vue3项目再安装electron并配置,超级麻烦且容易很多坑) cnpm create electron-vite cnpm i 或 cnpm create @quick-start/electron@latest 打包electron项目 npm run build 或通过以下指令来打包对应的平台包 如果卡在download提示github的网络问题导致打包失败,则自己根据报错提示...
vite.electron.build.ts//打包electron项目 index.html src 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 ()...
简介:使用vue3+vite+electron构建小项目介绍Electron进程间通信 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。
简介:Vue3 Vite electron 开发桌面程序 Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML...
在根目录创建一个plugins编写vite插件帮我们启动electron plugins vite.electron.dev.ts //编写electron开发模式 vite.electron.build.ts //打包electron项目 index.html src main.ts App.vue background.ts //手动创建文件用于编写electron package.json tsconfig.json ...
当使用 electron 加 vue3 进行开发时,如果不进行开发配置,需要在启动 vue 项目时,另开一个终端,单独启动 electron,同时在更改主进程代码时,窗口不会自动刷新,需要终结掉之前的 electron 启动进程,重新启动才能获取到最新的主进程更改。 为了方便开发,可以安装vite-plugin-electron和vite-plugin-electron-renderer这两个...