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. 克隆新仓库并安装依赖

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

通过 GitHub CLI 创建

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

创建项目后，建议修改 package.json 中的 name 字段。

开发命令

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

目录结构

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

路由懒加载

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

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

页面组件使用默认导出：

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

发布为 GitHub 模板仓库

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

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

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

License

MIT