forked from zhongyidian/yx-react-template
103 lines
2.1 KiB
Markdown
103 lines
2.1 KiB
Markdown
# 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
|