React启动器

electron-app — React 启动器模板

作者 daltonmenezes

基于Electron Vite的React 19桌面应用启动器，集成Tailwind 4与shadcn/ui，支持自动发布。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

仓库预览 1

查看源码在新标签页打开

作者提供的预览

来自项目仓库的原始界面图片。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

集成 React 19、TypeScript 5、Tailwind 4、shadcn/ui，技术栈较新

内置窗口路由和预加载脚本，主进程与渲染进程开发配置完善

支持 GitHub Actions 自动构建 Windows、macOS、Linux 安装包

提供源码保护方案，并集成代码检查工具 Biome

按住 Alt/Option 点击元素即可跳转到对应代码，调试方便

模板详细介绍

electron-app 是一个面向 Electron 桌面应用的启动器模板，将 React 19、TypeScript 5、Tailwind CSS 4 和 shadcn/ui 组合在一起，并采用 Electron Vite 作为构建工具。它内置了窗口路由（基于 React Router DOM v7 和 Electron Router DOM v2）、预加载脚本（context bridge）以及绝对路径支持，省去了不少桌面应用初期搭建的琐碎配置。模板还集成了代码检查工具 Biome 和图标库 lucide-icons，并提供了按住 Alt/Option 点击 DOM 元素即可定位代码的 inspector 功能，对调试界面比较实用。

项目结构经过设计，主进程和渲染进程的自动重载与 Fast Refresh 已配置好，开发体验相对顺畅。发布方面，模板自带了 GitHub Actions 工作流，可以构建 Windows、macOS 和 Linux 的安装包，也提供了源码保护的相关方案。如果你需要快速启动一个界面现代、技术栈统一的 Electron 项目，这个模板能省去不少集成时间。

不过要注意，模板要求 Node.js 22 和 pnpm 10，并且出于安全考虑，pnpm 的 onlyBuiltDependenciesFile 机制限制了依赖的 postinstall 脚本，新增需要编译的原生依赖时，需要手动将其加入 trusted-dependencies-scripts.json 文件。另外，Electron 版本高于 22 后不再支持 Windows 7/8，若需兼容这些系统，需要自行降级。上线前务必检查 package.json 中的应用标识、版本等配置，并阅读仓库提供的 STRUCTURE、RELEASING 等文档，确认构建和发布流程符合你的需求。

React启动器

适合你的项目吗？

适用场景

需要快速搭建跨平台桌面应用的团队或个人开发者
希望使用 React 19 和 Tailwind 4 构建现代化界面的 Electron 项目
需要自动发布流程，并希望减少 CI 配置工作量的项目
对代码质量和依赖安全有要求，希望使用 Biome 和 pnpm 严格管理的项目

适合人群

熟悉 React 和 TypeScript 的开发者
愿意使用 pnpm 和 Node.js 22 的团队
需要从零开始构建 Electron 应用，并希望有清晰结构参考的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
使用前需安装 Node.js 22 和 pnpm 10。
2
通过 npx degit daltonmenezes/electron-app/template 创建项目后，执行 pnpm install 和 pnpm dev 即可启动开发。
3
注意检查 package.json 中的项目配置，并根据需要修改 trusted-dependencies-scripts.json 以允许新依赖的 postinstall 脚本。
4
发布相关配置请参考 docs/RELEASING.md。

查看仓库使用说明