Electron + Vite + Vue 桌面应用模板

一个现代化的桌面应用开发模板，基于Electron、Vite和Vue 3。

特性

• Electron - 构建跨平台桌面应用
• ⚡ Vite - 闪电般的构建和热更新
• Vue 3 - 渐进式JavaScript框架
• Element Plus - 现代化UI组件库
• 国际化 - 多语言支持
• 主题切换 - 亮色/暗色主题
• ️ 数据库支持 - 内置SQLite数据库

预览

开发环境

前提条件

• Node.js >= 16
• npm >= 8

安装

# 克隆仓库
git clone https://gitee.com/jl15988/electron-vite-vue-template.git
cd electron-vite-vue-template

# 安装依赖
npm install

开发

# 启动开发服务器
npm run dev

在开发模式下，应用会自动打开开发者工具并提供实时热更新支持。

构建

# 构建应用
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 配置

扩展指南

添加新页面

1. 在 src/views/ 创建新的页面组件
2. 在 src/router/index.ts 添加路由配置
3. 在 src/components/AppLayout.vue 添加导航项

添加新语言

1. 在 src/i18n/ 创建新的语言文件（复制现有文件并翻译）
2. 在 src/i18n/index.ts 中导入新语言并添加到支持列表

添加新数据模型

1. 在 electron/db/models/ 创建新的数据模型类
2. 在 electron/db/services/ 创建相应的服务类
3. 在 electron/ipc/dbHandlers.ts 添加相关IPC处理函数
4. 在 electron/preload.ts 暴露API给渲染进程

延伸（数据库ORM工具）

为了方便数据库操作延伸开发了SQLite的ORM工具
博客：《一个轻量级的 SQLite ORM 工具包》
项目地址：https://gitee.com/jl15988/quicklite