一个现代化的桌面应用开发模板，基于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封装 ### 核心模块 模板内置了三个主要的核心基础模块： - **数据库模块** - 基于better-sqlite3的数据库操作接口 [文档](electron/db/README.md) - **日志模块** - 基于electron-log的日志记录系统 [文档](electron/log/README.md) - **存储模块** - 基于electron-store的轻量级数据存储 [文档](electron/store/README.md) ## 项目结构 ``` ├── electron/ # Electron 主进程代码 │ ├── db/ # 数据库相关代码 │ │ ├── models/ # 数据模型 │ │ ├── services/ # 数据服务 │ │ └── ... # 数据库管理类和工具 │ ├── log/ # 日志模块 │ ├── store/ # 存储模块 │ ├── 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给渲染进程 ## 贡献 欢迎提交问题和贡献代码！ ## 许可证 [MIT License](LICENSE) ## 开发规范 1. ipcMain.handle 默认ipcMain.handle参数第一个为监听实例，第二个才是参数，如果实例不用，则写成_，而非e或其他字符，以满足ts类型检查 2. preload内容 preload中内容为预加载脚本，不能使用electron的其他接口，只用来通信，处理代码要写在electron/ipc/handlers.ts中，否则预加载脚本将失效 3. contextIsolation contextIsolation是一只安全隔离机制，不要关闭，通过预加载脚本与electron通信 4. 预加载脚本通信 无参数，send->on方式同步方式无返回值，invoke->handle支持异步并返回结果 ## 问题汇总 ### 1. 安装依赖后报错 一般是执行rebuild问题，因为适配问题要对better-sqlite3重构，如果失败可以手动执行`npm run rebuild`命令 ### 2. rebuild命令执行失败 尝试多执行几次，或者尝试在环境变量中添加如下内容 ``` ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/" ```