create-tengits-app/README.md

🚀 快速创建基于 React + Rsbuild + TypeScript + Tailwind CSS + Antd 的现代前端项目脚手架

# Create Tengits App

<div align="center">

🚀 **快速创建基于 React + Rsbuild + TypeScript + Tailwind CSS + Antd 的现代前端项目脚手架**

[![NPM version](https://img.shields.io/npm/v/create-tengits-app.svg?style=flat)](https://npmjs.org/package/create-tengits-app)
[![NPM downloads](https://img.shields.io/npm/dm/create-tengits-app.svg?style=flat)](https://npmjs.org/package/create-tengits-app)
[![License](https://img.shields.io/github/license/your-username/create-tengits-app.svg)](https://github.com/your-username/create-tengits-app/blob/main/LICENSE)

</div>

## ✨ 特性

- ⚡ **快速构建** - 基于 [Rsbuild](https://rsbuild.dev/) 的极速构建体验
- ⚛️ **React 18** - 最新的 React 版本，支持并发特性
- 🔷 **TypeScript** - 完整的类型安全支持
- 🎨 **Tailwind CSS** - 实用优先的 CSS 框架
- 🐜 **Ant Design** - 企业级 UI 组件库
- 🌍 **国际化** - 完整的 i18n 支持（React-i18next）
- 📱 **响应式设计** - 移动端友好
- 🔧 **开发工具** - ESLint、PostCSS 等完整工具链
- 📦 **Monorepo** - 基于 pnpm workspace 的包管理
- 🎯 **生产就绪** - 开箱即用的生产环境配置

## 🚀 快速开始

### 方式一：使用 npx（推荐）

```bash
npx create-tengits-app
```

### 方式二：全局安装

```bash
# 使用 npm
npm install -g create-tengits-app

# 使用 yarn
yarn global add create-tengits-app

# 使用 pnpm
pnpm add -g create-tengits-app

# 创建项目
create-tengits-app
```

### 方式三：一键创建

```bash
# npm
npm create react-rsbuild-app

# yarn
yarn create react-rsbuild-app

# pnpm
pnpm create react-rsbuild-app
```

## 📖 使用方法

1. **运行脚手架命令**
   ```bash
   npx create-tengits-app
   ```

2. **输入项目名称**
   ```
   请输入项目名称（默认: my-react-app）: my-awesome-project
   ```

3. **等待项目创建和依赖安装**
   脚手架会自动：
   - 创建项目目录
   - 复制模板文件
   - 安装项目依赖
   - 配置项目信息

4. **启动开发服务器**
   ```bash
   cd my-awesome-project
   pnpm start  # 或 yarn start / npm start
   ```

## 📁 项目结构

生成的项目结构如下：

```
my-awesome-project/
├── packages/
│   └── main/                  # 主应用包
│       ├── src/
│       │   ├── components/    # 可复用组件
│       │   ├── pages/         # 页面组件
│       │   │   ├── Home/      # 首页
│       │   │   └── Login/     # 登录页
│       │   ├── styles/        # 样式文件
│       │   ├── types/         # TypeScript 类型定义
│       │   ├── utils/         # 工具函数
│       │   ├── App.tsx        # 应用主组件
│       │   ├── index.jsx      # 应用入口
│       │   ├── routes.tsx     # 路由配置
│       │   └── menus.jsx      # 菜单配置
│       ├── public/            # 静态资源
│       │   ├── locales/       # 国际化文件
│       │   └── ...
│       ├── package.json       # 包配置文件
│       ├── rsbuild.config.ts  # Rsbuild 配置
│       ├── tailwind.config.js # Tailwind 配置
│       └── tsconfig.json      # TypeScript 配置
├── pnpm-workspace.yaml        # pnpm workspace 配置
├── package.json               # 根包配置
├── eslint.config.mjs          # ESLint 配置
└── README.md                  # 项目说明
```

## 🛠️ 可用脚本

在项目目录中，你可以运行：

### pnpm
版本：9.15.9

### `pnpm start`
启动开发服务器，通常在 [http://localhost:3000](http://localhost:3000) 访问

### `pnpm build`
构建生产版本到 `dist` 目录

### `pnpm preview`
预览生产构建版本

### `pnpm doctor`
检查项目配置和依赖

## 🎨 技术栈

- **构建工具**: [Rsbuild](https://rsbuild.dev/) - 基于 Rspack 的高性能构建工具
- **前端框架**: [React](https://reactjs.org/) - 用于构建用户界面的 JavaScript 库
- **类型系统**: [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集，提供静态类型检查
- **样式方案**: [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
- **UI 组件库**: [Ant Design](https://ant.design/) - 企业级 UI 设计语言和组件库
- **路由**: [React Router](https://reactrouter.com/) - React 的声明式路由
- **状态管理**: [React Query](https://tanstack.com/query) - 强大的数据同步库
- **HTTP 客户端**: [Axios](https://axios-http.com/) - 基于 Promise 的 HTTP 库
- **国际化**: [React-i18next](https://react.i18next.com/) - React 的国际化框架
- **包管理**: [pnpm](https://pnpm.io/) - 快速、节省磁盘空间的包管理器

## 🔧 自定义配置

### Rsbuild 配置

编辑 `packages/main/rsbuild.config.ts` 来自定义构建配置：

```typescript
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  // 你的自定义配置
});
```

### Tailwind CSS 配置

编辑 `packages/main/tailwind.config.js` 来自定义样式：

```javascript
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // 你的自定义主题
    },
  },
  plugins: [],
};
```

### TypeScript 配置

编辑 `packages/main/tsconfig.json` 来调整 TypeScript 设置。

## 🌍 国际化

项目内置了完整的国际化支持：

1. **语言文件位置**: `packages/main/public/locales/`
2. **支持语言**: 中文、英文、德文、西班牙文、法文
3. **使用方式**:
   ```tsx
   import { useTranslation } from 'react-i18next';
   
   const { t } = useTranslation();
   return <div>{t('welcome')}</div>;
   ```

## 📦 部署

### 构建项目
```bash
pnpm build
```

### 静态部署
构建后的文件在 `packages/main/dist` 目录中，可以部署到任何静态文件服务器。

### 环境配置
项目支持多环境配置：
- 开发环境: `pnpm start`
- 测试环境: `pnpm start:test`
- 预发布环境: `pnpm start:pre`
- 生产构建: `pnpm build`

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📝 更新日志

### v1.0.0
- 🎉 初始版本发布
- ✨ 支持 React 18 + Rsbuild
- 🎨 集成 Tailwind CSS + Ant Design
- 🌍 内置国际化支持
- 📱 响应式设计

## 📄 许可证

[MIT](LICENSE) © [Your Name]

## 🙏 致谢

- [Rsbuild](https://rsbuild.dev/) - 极速的 Web 构建工具
- [React](https://reactjs.org/) - 用于构建用户界面的 JavaScript 库
- [Ant Design](https://ant.design/) - 企业级 UI 设计语言
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架

---

<div align="center">

**如果这个项目对你有帮助，请给一个 ⭐️ Star ⭐️**

Made with ❤️ by [Your Name]

</div>