import{ defineConfig }from'vite';importvuefrom'@vitejs/plugin-vue';exportdefaultdefineConfig({plugins: [vue()],build: {outDir:'dist', }, }); 3. 配置 Electron 在项目根目录下创建main.js文件,这是 Electron 的主进程文件: const{ app,BrowserWindow} =require('electron');constpath =require('p...
要将现有的Vue 3 + TypeScript + Vite项目集成到Electron中,你可以按照以下步骤进行: 1. 安装Electron及相关依赖 首先,你需要在你的Vue 3项目中安装Electron及其相关依赖。打开终端,在项目根目录下运行以下命令: bash npm install electron --save-dev 同时,你还需要安装electron-builder来简化打包过程: bash npm...
进入到项目 执行安装和运行命令,可以看到vue项目已经启动起来了 cd electron-desktop-tool npm install npm run dev 项目可以在浏览器中跑起来,说明没毛病,下一步就在项目中引入 electron 目录结构 这是目前的目录结构 安装electron 在安装 electron之前需要先配置一下 安装源 在根目录下新建一个.npmrc文件 strict-s...
使用Vite脚手架创建Vue3项目。 集成Electron,可通过electron-builder或vue-cli-plugin-electron-builder等插件。 # 使用Vite创建Vue3项目 npm create vite@latest my-electron-app -- --template vue cd my-electron-app npm install # 安装Electron插件 npm install --save-dev vue-cli-plugin-electron-builder vu...
新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的vue项目路径const localAddress = "http://localhost:5173";//创建一个新的窗口const createWindow = () =>{ const win=newBrowserWindow({ ...
Vue 源码依旧放在src Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 Vue3.4 至于标题特地指出Vue3.4版本,主要是新出的几个特性比较香,这里简单提一下 ...
先用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 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 中是正确的,所以我们的构建脚本文件需要...