# React Vite Template

一个基于 React 19、TypeScript、Vite、React Router 和 Tailwind CSS 的前端项目模板。

## 特性

- React 19 + TypeScript
- Vite 6 开发与构建
- React Router 7 路由管理
- 路由页面懒加载
- Tailwind CSS 4
- Biome 代码格式化与检查
- Husky + lint-staged 提交前检查
- `@` 指向 `src` 的路径别名
- 组件分层：通用组件、业务组件、页面组件

## 使用模板

### 通过 GitHub 页面创建

1. 打开模板仓库页面
2. 点击 **Use this template**
3. 创建自己的新仓库
4. 克隆新仓库并安装依赖

```bash
git clone https://github.com/your-name/your-app.git
cd your-app
bun install
bun dev
```

### 通过 GitHub CLI 创建

```bash
gh repo create my-react-app --template your-name/react-vite-template --public
cd my-react-app
bun install
bun dev
```

创建项目后，建议修改 [package.json](package.json) 中的 `name` 字段。

## 开发命令

```bash
bun dev        # 启动开发服务器
bun build      # 类型检查并构建生产版本
bun preview    # 预览生产构建
bun lint       # 代码检查
bun lint:fix   # 自动修复代码问题
```

## 目录结构

```text
src/
├── api/          # API 请求相关代码
├── assets/       # 项目资源
├── components/   # 组件
│   ├── business/ # 业务组件
│   └── common/   # 通用组件
├── hooks/        # 自定义 Hooks
├── pages/        # 页面组件
├── router/       # 路由配置
├── styles/       # 全局样式
├── types/        # TypeScript 类型
└── utils/        # 工具函数
```

## 路由懒加载

模板内置了 `lazyRoute` 工具函数，新页面可以这样配置：

```tsx
{
  path: "about",
  lazy: lazyRoute(() => import("../pages/About/About")),
}
```

页面组件使用默认导出：

```tsx
export default function About() {
  return <div>About</div>;
}
```

## 发布为 GitHub 模板仓库

如果你要把这个项目作为模板发布：

1. 推送到 GitHub
2. 进入仓库 **Settings**
3. 勾选 **Template repository**

之后其他人就可以通过 **Use this template** 使用它。

## License

MIT