简介:使用vue3+vite+electron构建小项目介绍Electron进程间通信 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。
进入到项目 执行安装和运行命令,可以看到vue项目已经启动起来了 cd electron-desktop-tool npm install npm run dev 项目可以在浏览器中跑起来,说明没毛病,下一步就在项目中引入 electron 目录结构 这是目前的目录结构 安装electron 在安装 electron之前需要先配置一下 安装源 在根目录下新建一个.npmrc文件 strict-s...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 复制 "@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.2","electron-builder":"^...
接下来在vite.config.js中引入vite-plugin-electron插件,配置主进程入口,将electron和vite项目结合起来。 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(), electro...
整个项目采用vite5.x构建工具整合electron跨端技术,使用vue3 setup语法编码开发。 入口配置main.js import { createApp } from 'vue' import './style.scss' import App from './App.vue' // 引入组件库 import ElementPlus from 'element-plus'
Electron 25.2.0 Vite 4.3.9 Vue 3.2.47 Yarn 1.22.18 开发步骤 1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: ...
构建我们的Vue3 应用程序 由于我们的Vite 加 Vue3 项目,使用了一些其他技术,所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中,也是同样的道理,我们需要先构建我们的Vue3 + vite 的项目。 因为我们的希望构建完之后的 js 和 css 相关素材的引用路径在 Electron 中是正确的,所以我们的构建脚本文件需要...
Electron、Vite和Vue3的结合,为我们提供了一个强大而灵活的解决方案,能够快速开发出美观、功能丰富的跨平台桌面应用。 一、Electron简介 Electron是一个使用Web技术(HTML, CSS, 和JavaScript)来创建跨平台桌面应用程序的框架。它结合了Chromium和Node.js,让开发者能够使用前端技术来编写应用界面,并通过Node.js访问底层...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: "@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.2","electron-builder": "^22.9.1","elec...