{"id":26279536,"url":"https://github.com/liangskyli/electron-vite-react","last_synced_at":"2026-04-10T01:03:26.281Z","repository":{"id":282042460,"uuid":"947257432","full_name":"liangskyli/electron-vite-react","owner":"liangskyli","description":"一套基于react19、ts、vite6的项目模板,帮助快速搭建electron项目。","archived":false,"fork":false,"pushed_at":"2025-03-12T13:14:02.000Z","size":159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T14:23:46.206Z","etag":null,"topics":["electron","mock-server","react19","ts","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liangskyli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-03-12T12:02:19.000Z","updated_at":"2025-03-12T13:14:06.000Z","dependencies_parsed_at":"2025-03-12T14:35:01.420Z","dependency_job_id":null,"html_url":"https://github.com/liangskyli/electron-vite-react","commit_stats":null,"previous_names":["liangskyli/electron-vite-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangskyli%2Felectron-vite-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangskyli%2Felectron-vite-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangskyli%2Felectron-vite-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liangskyli%2Felectron-vite-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liangskyli","download_url":"https://codeload.github.com/liangskyli/electron-vite-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243589329,"owners_count":20315471,"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","mock-server","react19","ts","vite"],"created_at":"2025-03-14T14:15:19.868Z","updated_at":"2026-04-10T01:03:26.272Z","avatar_url":"https://github.com/liangskyli.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Electron-Vite-React 项目模板\n\n\u003cdiv align=\"center\"\u003e\n\n![Electron](https://img.shields.io/badge/Electron-40.x-47848F?logo=electron)\n![React](https://img.shields.io/badge/React-19.x-61DAFB?logo=react)\n![Vite](https://img.shields.io/badge/Vite-7.x-646CFF?logo=vite)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)\n\n\u003c/div\u003e\n\n## 🚀 项目简介\n一套基于现代技术栈的桌面应用开发模板，集成了完整的开发环境配置和最佳实践，助你快速启动项目开发。\n\n## 🎯 主要特性\n\n### 核心功能\n- ✨ **路由懒加载** - 优化首屏加载时间\n- 🔄 **状态管理 (Zustand)** - 简单高效的状态管理方案\n- 📡 **HTTP 请求封装** - 基于 Axios 的统一请求处理\n- 🎭 **Mock 服务** - 支持接口数据模拟，提供场景化的数据管理\n- 🎨 **UI 框架** - 集成 Ant Design + TailwindCSS\n- 🔄 **热重载** - 快速的开发体验\n- 🧪 **测试支持** - 内置 Vitest 测试框架\n\n\n### 开发体验\n- 📝 ESLint + Prettier + Stylelint - 代码质量保证\n- 🔍 TypeScript 类型检查\n- 🎨 自动格式化 import 语句顺序\n- 🧪 Vitest 单元测试支持\n\n### 状态管理\n- Zustand\n- Immer\n- optics-ts\n\n### 工具库\n- React Router v7\n- Axios (封装 @liangskyli/axios-request)\n- classnames\n- koffi (Node.js C FFI)\n- electron-log\n- electron-updater\n\n## 🚀 快速开始\n\n### 环境要求\n- Node.js: ^20.19.0 || \u003e=22.12.0\n- 包管理器: pnpm\n\n### 安装依赖\n```bash\npnpm install\n```\n\n### 开发模式\n```bash\n# 标准开发模式\npnpm dev\n\n# 带 Mock 数据的开发模式\npnpm dev:mock\npnpm dev:mock-server  # 新开终端运行 mock 服务\n\n# 基于openapi生成 Mock 数据和接口数据\npnpm mock-gen\n\n```\n\n### 生产构建\n```bash\n# windows打包\npnpm build:pro:win\n# mac打包\npnpm build:pro:mac\n```\n\n## 🔧 环境配置\n\n项目支持多环境配置：\n- `.env` - 基础配置\n- `.env.dev` - 开发环境\n- `.env.pro` - 生产环境\n- `.env.test` - 测试环境\n- `.env.dev-mock` - Mock 开发环境\n\n## 📚 技术栈\n\n### 🛠 技术栈选型\n\n- **React 19 \u0026 React-DOM**：使用最新版 React 实现前端高性能和更流畅的用户体验。\n- **React-Router**：最新v7版本，支持路由懒加载，优化页面切换性能。\n- **[tailwindcss](https://tailwindcss.com/)**：使用tailwindcss@4版本。\n- **Less 预编译**：使用xxx.module.less，支持CSS Modules）。---请优先使用Tailwind，Less作为备选方案\n- **[zustand](https://github.com/pmndrs/zustand)**：轻量级的状态管理库。通过对比 Redux、Dva、React-Toolkit、MobX，以及 `useContext` 结合 `useReducer` 的管理方式，最终选择了更简单的 Zustand。\n- **Immer**：简化不可变数据结构操作，尤其在多层次嵌套对象中处理更方便。\n- **[optics-ts](https://github.com/akheron/optics-ts)**：适用于需要对大型嵌套对象进行深度操作，且希望代码类型安全、易读的场景。\n- **classnames**：动态类名管理工具，特别适合条件渲染样式。\n- **[@liangskyli/axios-request](https://github.com/liangskyli/request/blob/main/packages/axios-request/README.md)**：封装 HTTP 请求库，更方便与后端接口对接。\n- **[@liangskyli/mock](https://github.com/liangskyli/mock#readme)**：支持接口数据本地mock，支持数据场景化和热更新。\n- **[@liangskyli/http-mock-gen](https://github.com/liangskyli/mock/blob/master/packages/http-mock-gen/README.md)**：基于openapi v3 生成 ts数据类型和http mock 数据代码。\n- **[koffi](https://koffi.dev/)**：Node.js C FFI 模块,支持调用各个平台的共享库，如：.so, .dll, .dylib。可以不需要安装C++ 编译器\n- **[electron-log](https://github.com/megahertz/electron-log)**：提供electron主进程，预加载脚本，渲染进程日志日志功能，默认console信息写日志\n- **[antd](https://ant.design/docs/react/introduce-cn)**：基于 Ant Design 设计体系的 React UI 组件库\n- **单元测试**：基于vitest实现代码的单元测试。\n\n### 核心依赖\n- Electron 40\n- React 19\n- React Router v7\n- TypeScript\n- Vite\n- Tailwind CSS v4\n- Zustand (状态管理)\n- Axios (HTTP 请求)\n\n### 工具链\n- ESLint\n- Prettier\n- Stylelint\n- Husky\n- Commitlint\n- Vitest\n\n### 🔧 其他推荐工具\n- **[接口开发提效工具](https://github.com/liangskyli/mock/blob/master/packages/http-mock-gen/README.md)**：基于openapi v3 生成 ts数据类型和http mock 数据代码。\n\n## 📝 开发规范\n\n### 代码风格\n- 文件/文件夹命名：`kebab-case`\n- 样式命名：优先使用Tailwind, css类名使用`kebab-case`\n- 组件命名：PascalCase\n- TypeScript 优先\n\n### Git 提交规范\n使用 Conventional Commits 规范，例如：\n- `feat: add new feature`\n- `fix: resolve bug`\n- `docs: update documentation`\n\n## 项目结构\n\n```tree\n├── .husky # Husky 配置文件夹，用于管理 Git 钩子\n│   └── commit-msg # 检查提交钩子配置\n│   └── pre-commit # 格式化钩子配置\n├── __test__ # 单元测试文件目录\n├── electron # electron代码目录\n│   └── common # 主进程和预加载脚本的通用代码\n│   └── main # 主进程代码\n│   └── preload # 预加载脚本代码\n├── mock # 接口mock数据\n├── public # 静态资源目录，用于存放不经过 Vite 处理的静态资源\n├── resources # electron资源目录，用于主进程和预加载脚本的资源\n├── src # 源代码目录\n│ ├── assets # 静态资源文件，如图片、字体等\n│ ├── components # 公共组件目录\n│ ├── hooks # 自定义 React Hooks\n│ │ └── use-router # 路由操作 Hook\n│ │ └── ...\n│ ├── icons # svg 图标\n│ ├── layouts # 页面布局组件\n│ ├── pages # 页面组件\n│ ├── router # 路由配置\n│ │ └── modules # 页面路由配置项\n│ │ └── utils # 路由相关工具函数\n│ │ └── index.tsx # 路由入口\n│ ├── services # API 服务封装\n│ ├── store # 状态管理\n│ │ └── modules # 状态管理模块\n│ │ └── index.ts # 状态入口\n│ ├── styles # 样式\n│ ├── types # TypeScript 类型定义\n│ └── utils # 工具函数\n├── .commitlintrc.js # Commitlint 配置文件，用于 Git 提交信息的风格检查\n├── .editorconfig # 编辑器配置文件，用于统一不同编辑器的代码风格\n├── .env # 基础环境配置文件\n├── .env.dev # 开发环境配置文件\n├── .env.dev-mock # mock开发环境配置文件\n├── .env.pro # 生产环境配置文件\n├── .env.test # 测试环境配置文件\n├── .gitignore # git忽略文件\n├── .npmrc # npm配置文件\n├── .prettierignore # 代码风格配置忽略文件\n├── .prettierrc.js # Prettier 配置文件，用于代码格式化\n├── .stylelintignore # 样式风格配置忽略文件\n├── electron.vite.config.ts # electron-vite配置文件\n├── electron-builder.json # electron-builder配置文件\n├── eslint.config.js # ESLint 配置文件，用于代码风格和错误检查\n├── index.html # 入口页面\n├── lint-staged.config.js # Lint-Staged 配置文件，用于在 Git 提交前自动运行 Linters\n├── package.json # 项目依赖配置文件\n├── mock.config.ts # mock服务配置文件\n├── package.ts # 包配置文件\n├── pnpm-lock.yaml # 安装包锁定文件\n├── pnpm-workspace.yaml # 工作空间文件\n├── postcss.config.js # postcss 配置文件\n├── README.md\n├── stylelint.config.js # Stylelint 配置文件，用于样式文件的风格和错误检查\n├── tsconfig.json # TypeScript 配置文件\n├── vite.config.ts # Vite 配置文件，用于定义 Vite 项目的构建和服务选项\n├── vitest.config.ts # 单元测试配置文件\n└── vitest.setup.ts # 单元测试环境初始化配置\n```\n\n## 🔄 降级指南\n\n### Electron 版本降级\n- 你可以手动将 package.json 中的 electron 修改至低版本，支持electron最低版本25.0.0\n\n\n## 🤝 贡献指南\n\n欢迎提交 Issue 和 Pull Request。请确保：\n1. Fork 项目并创建特性分支\n2. 遵循项目代码规范\n3. 提供清晰的提交信息\n4. 更新相关文档\n\n## 📄 许可证\n\n[MIT License](LICENSE)\n\n## 🌟 支持项目\n\n如果这个项目对你有帮助，请给它一个 Star ⭐️\n\n---\n\u003cdiv align=\"center\"\u003e\nMade with ❤️ by \u003ca href=\"https://github.com/liangskyli/electron-vite-react\"\u003eElectron-Vite-React\u003c/a\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliangskyli%2Felectron-vite-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliangskyli%2Felectron-vite-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliangskyli%2Felectron-vite-react/lists"}