README_REACT.md 1.3 KB

Electron + React + Vite 项目

最基础的 Electron + React + Vite 桌面应用项目。

项目结构

.
├── src/
│   ├── index.jsx          # 入口文件(只做路由跳转)
│   └── home/
│       ├── home.jsx       # Home 页面组件
│       ├── home.js        # Home 逻辑
│       └── home.css       # Home 样式
├── electron/
│   └── main.js            # Electron 主进程
├── vite.config.js         # Vite 配置
└── package.json

安装依赖

npm install

运行应用

开发模式(推荐)

npm run electron:dev

这会同时启动:

  1. Vite 开发服务器(http://localhost:5173)
  2. Electron 应用

分别启动

# 终端1:启动 Vite
npm run dev

# 终端2:启动 Electron
npm run electron

打包应用

npm run electron:build

页面说明

index.jsx

  • 只做路由跳转逻辑
  • 访问 / 自动跳转到 /home

home.jsx

  • Home 页面组件
  • 包含一个 label 和一个 button

home.js

  • Home 页面的业务逻辑
  • handleClick 函数处理按钮点击

home.css

  • Home 页面的样式
  • 最基础的样式

技术栈

  • Electron - 桌面应用框架
  • React - UI 框架
  • Vite - 构建工具
  • React Router - 路由