在「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...
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 vue版本:3.3.4 虽然是vue3.x版本,但是大部分的代码还是采用了vue2.x的语法去编写,这样让没有学过vue3的同学们,看起来更直观一点 Electron是一个用于构建跨平台桌面应用程序的开源框架,由 GitHub 开发和维护。它允许开发者使用HTML、CSS和JavaScript等前端技术,结合 Node.js 和 Chromium,创建可...
vite-plugin-electron:这个插件可以在启动 vue 项目时,自动启动 electron 项目。该插件会在项目根目录下自动创建一个名为dist-electron/index.js的文件,这个文件就是它对 electron 主进程打包后的产物,用于 electron 的运行。也就是说,dist-electron/index.js需要配置在package.json的main属性上: ...
Vue3 Vite electron 开发桌面程序 Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML5和...
// https://vitejs.dev/config/ export default defineConfig({ base: "./", plugins: [vue()], }) 我们在终端中,执行npm run build命令。 就在根目录中生成了, dist 文件夹。 设置Electron 框架 有了Vue3 项目构建出来的 dist 目录之后, 设置Electron 就很简单了。
2. 创建一个vite项目 在windows包里调出cmd后执行 npm create vite 3. 安装electron npm install --save-dev electron npm install --save-dev electron@20.0.0 指定版本 注意:在electron21+后调用C++动态库会出现Error: Error in native callback错误,原因:Electron 21 及更高版本将启用 V8 内存隔离区,这将...
好的,以下是一个基本的 Electron + Vue3 + Vite 应用的开发步骤: 确保您已经安装了 Node.js 和 npm。 安装Vue CLI: npm install -g @vue/cli 创建一个新的 Vue3 项目: vuecreatemy-electron-app 进入项目目录: cdmy-electron-app 设置为国内镜像 ...