打包electron项目 npm run build 或通过以下指令来打包对应的平台包 如果卡在download提示github的网络问题导致打包失败,则自己根据报错提示链接先下载对应的包,再手动放到对应的目录即可,以下是各平台对应的目录: Linux: $XDG_CACHE_HOME or ~/.cache/electron/MacOS:~/Library/Cache
npm install -D electron electron-builder electron-devtools-installer vite-plugin-electron vite-plugin-electron-renderer rimraf 新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的vue项目路径const localAddress = "http://localhost:5...
我们需要先借助Vite初始化一个Vue3+TS 的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。 2.安装Electron相关包 初始...
其他文件:也就是 vue 初始化后的目录 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录 下面就开始初始项目 代码语言:javascript 代码运行次数:0 运行 AI代码解释 yarn create vite electron-desktop--template vue-ts ...
electron/main.ts //process.env.VITE_PUBLIC是electron-vite-vue预先定义好的//获取图片路径地址ipcMain.on("getImageUrl",(_,image)=>{_.returnValue=path.join(process.env.VITE_PUBLIC,image);}); preload.ts contextBridge.exposeInMainWorld("myAPI",{getImageUrl(image:string){constresp=ipcRenderer....
我们需要先借助Vite初始化一个Vue3+TS的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。
针对于我们当前的Electron+Vue3+TS项目,主要实现以下需求。 需求如下: 在渲染进程中,直接调用某个方法即可打开新窗口。 默认打开的新窗口是一个子窗口。 打开新窗口方法可以接收参数。 可以传入路由地址,新窗口渲染此路由地址页面。 可以传入窗口样式,如宽高、背景色、是否显示默认菜单栏等等。
yarncreatevite electron-desktop--template vue-ts 1. 先使用 vite 创建 vue 项目,然后我们再将 electron 嵌入到里面。 初始化完成后,我们先做一个本地 yarn 源的配置,防止下载库的时候出现异常。 配置.yarnrc 复制 registry"https://registry.npm.taobao.org/"electron_mirror"https://npm.taobao.org/mirrors...
cd my-vue3-ts-app npm install 安装Electron 及其相关依赖: 安装Electron、electron-builder 和 vite-plugin-electron 等依赖。 bash npm install -D electron electron-builder vite-plugin-electron 配置Electron: 在项目根目录下创建一个 electron-main 文件夹,并在其中创建一个 index.ts 文件作为 Electron ...
1. 搭建vite+vue-ts的项目 yarn create vite@ vuets_electron --template vue-tscd./vuets_electron yarn install && yarn dev AI代码助手复制代码 2. 接入electron 为了保证electron能够正常安装,在vuets_electron的根目录下创建.npmrc, 设置一下electron的镜像源 ...