electron_mirror=https://registry.npmmirror.com/-/binary/electron/:这个配置项指定了 Electron 包的镜像源,用于下载 Electron 框架相关的二进制文件 安装electron相关插件 接下来就可以进行安装electron和它相关的插件了 // 进入到项目中安装 electron npm install -D electron 安装electron-builder用于打包可安装exe程...
// renderer.js// vue页面触发新增网站按钮事件const handleSubmit = async () => {const result = await window.electronAPI.sendUrl(url)//拿到主进程返回的结果,做添加处理console.log(result)} 2、预加载脚本页面 // preload.jsconst { contextBridge, ipcRenderer} = require('electron')//桥接渲染进程与...
(给Vue官方的各个项目提issue真的是太难了,Electron官方项目在这方面就做的很好,很open、很包容) 环境 先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 复制 "@vue/compiler-sfc":"^3.0.0","vite":"^1.0.0-rc.9"...
#增加部分importAutoImportfrom'unplugin-auto-import/vite';importComponentsfrom'unplugin-vue-components/vite';import{ElementPlusResolver}from'unplugin-vue-components/resolvers';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[AutoImport({resolvers:[ElementPlusResolver()],}),Component...
使用vue3和vite创建vue的项目然后引入electron 创建Vite项目 npm create vite@latest electron-desktop-tool 进入到项目 执行安装和运行命令,可以看到vue项目已经启动起来了 cd electron-desktop-tool npm install npm run dev 项目可以在浏览器中跑起来,说明没毛病,下一步就在项目中引入 electron ...
Electron、Vite和Vue3的结合,为我们提供了一个强大而灵活的解决方案,能够快速开发出美观、功能丰富的跨平台桌面应用。 一、Electron简介 Electron是一个使用Web技术(HTML, CSS, 和JavaScript)来创建跨平台桌面应用程序的框架。它结合了Chromium和Node.js,让开发者能够使用前端技术来编写应用界面,并通过Node.js访问底层...
项目结构 首先,我们需要创建一个基本的 Vite + Vue 3 + Electron 项目结构。假设你已经安装了 Node.js 和 npm,接下来我们将一步步创建项目。 1. 初始化项目 # 创建项目文件夹mkdirvite-vue3-electron-expresscdvite-vue3-electron-express# 初始化 npm 项目npm init -y# 安装 Vite 和 Vue 3npm install vu...
Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 Vue3.4 至于标题特地指出Vue3.4版本,主要是新出的几个特性比较香,这里简单提一下 ...
一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。 之前也有使用vite2+vue3+electronc创建桌面端项目,不过vue-cli-plugin-electron-builder脚手架插件构建的项目electron版本只有13.x。如今electron版本都到了24,显然不能再用之前的方...