cnpm create electron-vite cnpm i 或 cnpm create @quick-start/electron@latest 打包electron项目 npm run build 或通过以下指令来打包对应的平台包 如果卡在download提示github的网络问题导致打包失败,则自己根据报错提示链接先下载对应的包,再手动放到对应的目录即可,以下是各平台对应的目录: Linux: $XDG_CACHE_HOM...
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-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录 下面就开始初始项目 代码语言:javascript 代码运行次数:0 运行 AI代码解释 yarn create vite electron-desktop --template vue-ts 先使用 vite 创建 vue 项目,然后我们再将 electron...
目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 ...
我们需要先借助Vite初始化一个Vue3+TS的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。
vite.electron.dev.ts // 导入需要使用的类型和库import type { Plugin } from 'vite'import type { AddressInfo } from 'net'import { spawn } from 'child_process'import fs from 'fs'// 导出Vite插件函数export const viteElectronDev = (): Plugin => {return {name: 'vite-electron-dev',// 在...
这篇文章主要记录一下Electron结合前端框架Vue + Vite的应用,整合三者框架并实现一键打包 目录结构 Vue 源码依旧放在src Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 ...
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的镜像源 ...
该包主要是为了方便我们开发和调试electron,可以去官网详细了解:electron-devtools-installer。 安装vite-plugin-electron: npm install vite-plugin-electron -D 该包集成了Vite和Electron,比如使用它之后可以让我们方便的在渲染进程中使用Node API或者Electron API,详细使用用法可以去官网学习:vite-plugin-electron。 安装r...
3.2 新建 electron-main/window.ts 文件 前面的 index.ts 只是主进程的入口文件,接下来我们需要编写真正创建窗口、创建托盘、监听事件等方法的文件了:window.ts。 这个文件我们主要编写以下几个函数: getWindow(id: number):获取当前窗口 createWindows(options: object):创建新的窗口 createTray():创建系统托盘 liste...