{"id":29408213,"url":"https://github.com/immrk/electron-modern-template","last_synced_at":"2026-05-08T07:33:17.259Z","repository":{"id":303021260,"uuid":"1007698671","full_name":"immrk/Electron-Modern-Template","owner":"immrk","description":"Modern Electron development framework: supports Vue, React(Coming soon), TS and i18n 现代化Electron开发框架：同时支持Vue、React(即将支持)、TS以及i18n国际化","archived":false,"fork":false,"pushed_at":"2025-07-05T07:13:02.000Z","size":401,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-05T08:19:55.312Z","etag":null,"topics":["electron","frontend","i18n","modern","react","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/immrk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-24T11:49:37.000Z","updated_at":"2025-07-05T07:13:06.000Z","dependencies_parsed_at":"2025-07-05T08:20:12.935Z","dependency_job_id":null,"html_url":"https://github.com/immrk/Electron-Modern-Template","commit_stats":null,"previous_names":["immrk/electron-modern-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/immrk/Electron-Modern-Template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immrk%2FElectron-Modern-Template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immrk%2FElectron-Modern-Template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immrk%2FElectron-Modern-Template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immrk%2FElectron-Modern-Template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/immrk","download_url":"https://codeload.github.com/immrk/Electron-Modern-Template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/immrk%2FElectron-Modern-Template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264712014,"owners_count":23652513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","frontend","i18n","modern","react","vue"],"created_at":"2025-07-11T02:25:03.069Z","updated_at":"2025-10-16T05:12:05.357Z","avatar_url":"https://github.com/immrk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron-Modern-Template\n\n\u003cdiv align=\"center\"\u003e\n\n![Electron](https://img.shields.io/badge/Electron-36.5.0-47848F?style=for-the-badge\u0026logo=electron)\n![Vue](https://img.shields.io/badge/Vue-3.5.17-4FC08D?style=for-the-badge\u0026logo=vue.js)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=for-the-badge\u0026logo=typescript)\n![Vite](https://img.shields.io/badge/Vite-6.3.5-646CFF?style=for-the-badge\u0026logo=vite)\n\n**现代化Electron开发框架：支持Vue3、TypeScript、多窗口管理、国际化、主题切换等特性**\n\n[English](./README_EN.md) | 中文\n\n\u003c/div\u003e\n\n## ✨ 核心特性\n\n### 🚀 现代化开发体验\n\n- **Vue3 + TypeScript + Vite** 技术栈，提供热重载、类型安全等现代化开发体验\n- **自动按需导入** UI组件和图标，无需手动导入，支持自定义主题\n- **多窗口开发环境** 支持同时开发多个窗口，每个窗口独立热重载\n- **Mock数据服务** 内置开发环境下的模拟数据服务\n\n### 🌍 国际化支持\n\n- **完整i18n解决方案** 主进程、渲染进程、UI组件均已集成国际化\n- **多语言切换** 支持中文、英文，可扩展更多语言\n- **系统语言跟随** 自动检测系统语言并应用\n- **实时语言切换** 无需重启应用即可切换语言\n\n### 🎨 主题系统\n\n- **明暗主题切换** 支持明亮、暗黑、跟随系统三种模式\n- **Element Plus集成** 完美适配Element Plus组件库主题\n- **自定义主题色** 支持自定义主色调和功能色\n- **响应式主题** 实时响应系统主题变化\n\n### 🪟 多窗口管理\n\n- **统一窗口管理器** 提供完整的窗口生命周期管理\n- **窗口状态同步** 实时同步窗口状态，支持窗口间通信\n- **灵活窗口配置** 支持自定义窗口大小、样式、行为\n- **跨平台兼容** 完美适配Windows、macOS、Linux\n\n### 🔧 开发工具\n\n- **TypeScript支持** 完整的类型定义和类型安全\n- **ESLint配置** 代码质量检查和格式化\n- **热重载开发** 开发环境下的快速迭代\n- **调试友好** 支持VSCode调试和开发者工具\n\n## 📦 技术栈\n\n\n| 技术           | 版本   | 说明                     |\n| -------------- | ------ | ------------------------ |\n| Electron       | 36.5.0 | 跨平台桌面应用框架       |\n| Vue            | 3.5.17 | 渐进式JavaScript框架     |\n| TypeScript     | 5.0+   | 类型安全的JavaScript超集 |\n| Vite           | 6.3.5  | 下一代前端构建工具       |\n| Element Plus   | 2.10.3 | Vue3组件库               |\n| Vue Router     | 4.5.1  | Vue官方路由管理器        |\n| Vue I18n       | 11.1.9 | Vue国际化插件            |\n| i18next        | 25.3.1 | 国际化框架               |\n| Electron Forge | 7.8.1  | Electron应用打包工具     |\n\n## 🚀 快速开始\n\n### 环境要求\n\n- Node.js \u003e= 18.0.0\n- npm \u003e= 8.0.0\n\n### 安装依赖\n\n```bash\nnpm install\n```\n\n### 创建环境变量文件.env\n\n复制.env.example文件并重命名为.env\n\n```\nVITE_MOCK=true\nVITE_API_BASE_URL=http://localhost:3000\n```\n\n### 开发模式\n\n```bash\n# 启动开发环境（所有窗口与MOCK服务-需要在.env中配置开启）\nnpm run dev\n\n# 仅启动特定窗口\nnpm run dev -- --only=main,setting\n\n# 启动Mock服务\n将.env文件中设置 VITE_MOCK=true\nnpm run dev\n```\n\n### 构建应用\n\n```bash\n# 单独构建渲染进程\nnpm run build:renderer\n\n# 单独构建主进程\nnpm run build:main\n\n# 一键构建并打包（默认构建当前运行系统对应的软件与安装包）\nnpm run make\n```\n\n### 运行应用\n\n```bash\n# 运行指令\nnpm run start\n\n# 以VSCODE DEBUG模式运行\nVSCODE-\u003eDEBUG功能-\u003e选择Electron TS Development / Electron TS Production 两种模式\n两种DEBUG模式分别对应渲染层的dev(接口运行模式)和生产构建模式\n```\n\n## 📁 项目结构\n\n```\nelectron-modern-template/\n├── src/\n│   ├── main/                 # 主进程代码\n│   │   ├── i18n/            # 主进程国际化\n│   │   ├── ipc/             # IPC通信处理\n│   │   ├── preload/         # 预加载脚本\n│   │   ├── windowManager.ts # 窗口管理器\n│   │   └── main.ts          # 主进程入口\n│   ├── renderer/            # 渲染进程代码\n│   │   ├── window/          # 窗口页面\n│   │   │   ├── main/        # 主窗口\n│   │   │   └── setting/     # 设置窗口\n│   │   ├── composables/     # Vue组合式函数\n│   │   ├── i18n/            # 渲染进程国际化\n│   │   └── styles/          # 样式文件\n│   ├── config/              # 配置文件\n│   └── utils/               # 工具函数\n├── scripts/                 # 构建脚本\n├── mock/                    # Mock数据\n├── dist/                    # 构建输出\n└── out/                     # 打包输出\n```\n\n## 🎯 核心功能\n\n### 多窗口管理\n\n项目采用统一窗口管理器，支持动态创建、管理多个窗口：\n\n```typescript\n// 创建窗口\nwindowManager.createWindow('main')\nwindowManager.createWindow('setting')\n\n// 窗口操作\nwindowManager.showWindow('main')\nwindowManager.hideWindow('setting')\nwindowManager.closeWindow('setting')\n```\n\n### 国际化系统\n\n完整的国际化解决方案，支持主进程和渲染进程：\n\n```typescript\n// 主进程国际化\nimport { t } from './i18n/index.js'\nconsole.log(t('menu.file'))\n\n// 渲染进程国际化\nimport { useI18n } from 'vue-i18n'\nconst { t } = useI18n()\nconsole.log(t('main.home.title'))\n```\n\n### 主题管理\n\n响应式主题系统，支持明暗主题切换：\n\n```typescript\n// 使用主题管理\nimport { useTheme } from '@/composables/useThemeVue'\nconst { themeColor, changeTheme } = useTheme()\n\n// 切换主题\nchangeTheme('dark')\n```\n\n### 语言管理\n\n智能语言管理系统，支持系统语言跟随：\n\n```typescript\n// 使用语言管理\nimport { useLanguage } from '@/composables/useLanguageVue'\nconst { currentLanguage, changeLanguage } = useLanguage()\n\n// 切换语言\nchangeLanguage('en-US')\n```\n\n## 🔧 配置说明\n\n### 窗口配置\n\n在 `src/config/windowConfig.ts` 中配置窗口属性：\n\n```typescript\nexport const WINDOW_LIST = {\n  main: {\n    width: 1200,\n    height: 800,\n    titleBarStyle: 'hidden',\n    devPort: 11069,\n  },\n  setting: {\n    width: 500,\n    height: 400,\n    titleBarStyle: 'hidden',\n    devPort: 11070,\n  }\n}\n```\n\n### 国际化配置\n\n在 `src/config/i18nConfig.ts` 中配置支持的语言：\n\n```typescript\nexport const i18nConfig = {\n  locales: ['system', 'en-US', 'zh-CN'],\n  defaultLocale: 'system',\n}\n```\n\n### 主题配置\n\n在 `src/renderer/styles/element/index.scss` 中自定义主题色：\n\n```scss\n@forward \"element-plus/theme-chalk/src/common/var.scss\" with (\n  $colors: (\n    \"primary\": (\n      \"base\": #6a7ade,\n      \"light-3\": #6e53a7,\n    ),\n  )\n);\n```\n\n## 🛠️ 开发指南\n\n### 添加新窗口\n\n1. 在 `src/config/windowConfig.ts` 中添加窗口配置\n2. 在 `src/renderer/window/` 下创建窗口目录\n3. 在 `src/main/menu.ts` 中添加菜单项\n\n### 添加新语言\n\n1. 在 `src/config/i18nConfig.ts` 中添加语言代码\n2. 在 `src/main/i18n/locales/` 和 `src/renderer/i18n/locales/` 中添加语言文件\n3. 更新语言选择器组件\n\n### 自定义主题\n\n1. 修改 `src/renderer/styles/element/index.scss` 中的颜色变量\n2. 在 `src/renderer/styles/element/dark-vars.css` 中配置暗色主题\n3. 在设置页面中添加主题选择器\n\n## 📦 打包部署\n\n### 开发环境打包\n\n```bash\n# 单独构建单一资源\nnpm run build:main（会清空dist目录，包括renderer构建内容，故执行后需要重新执行npm run build:renderer或运行dev端口模式）\nnpm run build:renderer\n\n# 运行渲染层生产版本\nnpm run start\n```\n\n### 生产环境打包\n\n```bash\n# 完整打包（包含安装包）\nnpm run make\n```\n\n打包后的文件位于 `out/` 目录下。\n\n## 🤝 贡献指南\n\n我们欢迎所有形式的贡献！\n\n### 开发流程\n\n1. Fork 本仓库\n2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启 Pull Request\n\n### 代码规范\n\n- 使用 TypeScript 进行开发\n- 遵循 ESLint 配置的代码规范\n- 添加适当的注释和文档\n- 确保所有测试通过\n\n## 📄 许可证\n\n本项目采用 [ISC License](LICENSE) 许可证。\n\n## 🙏 致谢\n\n- [Electron](https://electronjs.org/) - 跨平台桌面应用框架\n- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架\n- [Element Plus](https://element-plus.org/) - Vue3组件库\n- [Vite](https://vitejs.dev/) - 下一代前端构建工具\n\n## 📞 联系我们\n\n- 作者：Keyajian\n- 邮箱：keyajian@gmail.com\n- 项目地址：https://github.com/immrk/electron-modern-template\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimmrk%2Felectron-modern-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimmrk%2Felectron-modern-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimmrk%2Felectron-modern-template/lists"}