一个现代化的桌面应用开发模板，基于Electron、Vite和Vue 3。
特性
- 📦 Electron - 构建跨平台桌面应用
- ⚡ Vite - 闪电般的构建和热更新
- 🖖 Vue 3 - 渐进式JavaScript框架
- 🎨 Element Plus - 现代化UI组件库
- 🌍 国际化 - 多语言支持
- 🎭 主题切换 - 亮色/暗色主题
- 🗄️ 数据库支持 - 内置SQLite数据库
预览
开发环境
前提条件
- Node.js >= 16
- npm >= 8
安装
bash
# 克隆仓库
git clone https://gitee.com/jl15988/electron-vite-vue-template.git
cd electron-vite-vue-template
# 安装依赖
npm install开发
bash
# 启动开发服务器
npm run dev在开发模式下，应用会自动打开开发者工具并提供实时热更新支持。
构建
bash
# 构建应用
npm run build构建完成后，可在dist目录找到打包好的应用。
功能
自定义窗口标题栏
应用使用自定义窗口标题栏，提供最小化、最大化和关闭按钮。
国际化支持
应用支持多语言切换功能：
- 中文
- 英文
- 可轻松扩展添加其他语言
主题切换
支持亮色和暗色主题切换，并记住用户的主题选择。
侧边栏导航
提供可折叠的侧边栏导航，在空间有限时保持良好的用户体验。
开发者工具
在开发模式下提供丰富的开发工具：
- 性能监控 (FPS、内存使用)
- 应用重载
- 环境变量查看
- 开发者工具切换
数据库管理
内置SQLite数据库支持，提供完整的数据库管理界面：
- 数据库基本信息查看（版本、路径、表数量等）
- 表列表展示及记录统计
- 表结构查看
- 表数据浏览（支持分页和搜索）
- SQL查询和执行工具
- 数据库操作API封装
项目结构
├── electron/ # Electron 主进程代码
│ ├── db/ # 数据库相关代码
│ │ ├── models/ # 数据模型
│ │ ├── services/ # 数据服务
│ │ └── ... # 数据库管理类和工具
│ ├── ipc/ # IPC 通信处理
│ ├── main.ts # 主进程入口
│ └── preload.ts # 预加载脚本
├── public/ # 静态资源
├── src/ # 渲染进程源代码
│ ├── assets/ # 资源文件
│ ├── components/ # Vue 组件
│ ├── i18n/ # 国际化配置
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── types/ # TypeScript 类型定义
│ ├── views/ # 页面视图
│ │ ├── Database.vue # 数据库管理界面
│ │ └── ... # 其他页面
│ ├── App.vue # 根组件
│ ├── main.ts # 渲染进程入口
│ └── style.css # 全局样式
└── vite.config.ts # Vite 配置扩展指南
添加新页面
- 在
src/views/创建新的页面组件 - 在
src/router/index.ts添加路由配置 - 在
src/components/AppLayout.vue添加导航项
添加新语言
- 在
src/i18n/创建新的语言文件（复制现有文件并翻译） - 在
src/i18n/index.ts中导入新语言并添加到支持列表
添加新数据模型
- 在
electron/db/models/创建新的数据模型类 - 在
electron/db/services/创建相应的服务类 - 在
electron/ipc/dbHandlers.ts添加相关IPC处理函数 - 在
electron/preload.ts暴露API给渲染进程
延伸（数据库ORM工具）
为了方便数据库操作延伸开发了SQLite的ORM工具