前言

在拿 Tauri2开发了两套PC桌面软件，对号直播助力和对号JoChat、JoCall后，还是决定改回到Electron，这次决定全新从零将各个所用框架用官方最新版进行重构。之所以改回到Electron，原因主要是Tauri兼容性问题调起来太费劲，而且学习成本太高，对于团队现有前端技术人员来讲难度较大，只能向现实妥协了。

这次新的任务要求比较紧，要将Duihao Jo! 快速升级为一套基于Ai的生产力工具，且要面向普通用户进行推广，对迭代频次要求较高，希望这次重选Electron+vite+Vue+Element Plus能带来非常好的体验。

在开发Duihao Jo!的过程中形成了 eVVe 这个空框架，方便快速搭建 Electron+Vite+Vue+Element Plus 的跨端开发框架。

概览

本篇文章主要告诉新手如何快速使用Electron+vite+Vue+Element Plus最新版组合执行开发。
本文已收录在CSDN，https://blog.csdn.net/duihao/article/details/146083162

技术栈

编码工具：Visual Studio Code
前端技术：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
UI组件库：element-plus^2.9.5
跨端框架：electron^35.0.0
Electron 打包工具：electron-builder^25.1.8
Electron Vite插件：vite-plugin-electron^0.29.0

运行结果

安装Element Plus、Vite样例

点击以下链接，按说明拉取 Element Plus Vite 模板：

https://github.com/element-plus/element-plus-vite-starter

或者执行git拉取，运行后，先测试 element-plus-vite-starter 是否正常。

安装Electron及相关插件

创建electron启动程序

根目录下创建 electron.main.js 文件，用于electron启动主程序。

代码如下：

更改package.json配置

"scripts"上方增加一行：

"scripts"内dev、build变更为如下代码：

创建env.development

代码如下：

启动运行

已处理标题栏为VScode模式

完整代码

这里是空框架 Duihao eVVe：https://gitee.com/duihao/evve

这里是基于eVVe ( Electron+vite+Vue+Element Plus ) 开发的 Duihao Jo!包包：https://gitee.com/duihao/jo (Duihao Jo！: Duihao jo! 对号jo!包包，一个基于AI的新质生产力工具包。jo!包包为中文语态下的创作而生，集多模型对话、知识库管理、AI绘画、AI语音、翻译等功能于一体的多模态AI助手。无论是零技术用户还是技术研发者，都能在 Duihao Jo! 中找到适合自己的AI功能，以利用AI技术提升工作效率和创造力）。

eVVe 项目产生过程

前言#

概览#

技术栈#

运行结果#

安装Element Plus、Vite样例#

安装Electron及相关插件#

创建electron启动程序#

更改package.json配置#

创建env.development#

启动运行#

已处理标题栏为VScode模式#

完整代码#

前言

概览

技术栈