先用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":"^...
electron_mirror=https://registry.npmmirror.com/-/binary/electron/:这个配置项指定了 Electron 包的镜像源,用于下载 Electron 框架相关的二进制文件 安装electron相关插件 接下来就可以进行安装electron和它相关的插件了 // 进入到项目中安装 electron npm install -D electron 安装electron-builder用于打包可安装exe程...
1、使用vite创建vue3项目 npm init vite 2、安装依赖 npm install 3、安装electron npm install electron --save-dev 4、配置package.json "main": "main.js","scripts": {"dev": "vite","start": "electron ."} 5、创建文件 main.js主进程文件 preload.js预加载脚本文件 6、启动vue项目和electron项目 ...
vite-plugin-electron:这个插件可以在启动 vue 项目时,自动启动 electron 项目。该插件会在项目根目录下自动创建一个名为dist-electron/index.js的文件,这个文件就是它对 electron 主进程打包后的产物,用于 electron 的运行。也就是说,dist-electron/index.js需要配置在package.json的main属性上: { // ... "main...
Electron、Vite和Vue3的结合,为我们提供了一个强大而灵活的解决方案,能够快速开发出美观、功能丰富的跨平台桌面应用。 一、Electron简介 Electron是一个使用Web技术(HTML, CSS, 和JavaScript)来创建跨平台桌面应用程序的框架。它结合了Chromium和Node.js,让开发者能够使用前端技术来编写应用界面,并通过Node.js访问底层...
'./':"",plugins: [vue()] }) 因为base的设置在ELECTRON环境下与网站不同。 第5 步: 在项目根文件夹创建一个新的文件夹electron,并在其中创建文件electron.js // electron/electron.jsconstpath =require('path');const{ app,BrowserWindow} =require('electron');constisDev = process.env.IS_DEV=="...
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、安装项目依赖: ...
vite: ^4.3.2vue:^3.2.47electron:^24.4.0electron-builder: ^23.6.0 创建vite4+vue3项目 vite官网提供了npm/yarn/pnpm等方式创建vue3项目。 yarn create vite electron-vite4-vue3 cd electron-vite4-vue3 yarn install yarn dev 到这里一个简单的vite3+vue3项目就初始化好了。
而今天的主角正是 electron,作为一款 2013 年推出的桌面应用开发框架,其运行于 Chromium 内核以及 node 平台,使得开发者可以使用 html+css+js 进行开发,然而它的缺点也比较明显,构建时可是带上了整个 Chromium。但是作为一款经典的 JS 桌面应用框架,咱还是得了解一二的。下面给大家分享一下近期的项目搭建心得 ...