# f2e-create-template

**Repository Path**: f2e-server/f2e-create-template

## Basic Information

- **Project Name**: f2e-create-template
- **Description**: f2e3 create 模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://shy2850.com:2850/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-10
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Tailwind CSS 项目模板

🚀 基于 f2e-server3 的现代化前端开发模板，开箱即用 React + TypeScript + Tailwind CSS 技术栈

[![React](https://img.shields.io/badge/React-19.0.0-blue.svg)](https://react.dev)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1.5-38B2AC.svg)](https://tailwindcss.com)
[![f2e-server3](https://img.shields.io/badge/f2e--server3-1.13.7-green.svg)](https://gitee.com/f2e-server/f2e-server-3)

## ✨ 核心特性

- ⚡ **快速启动**: 集成 f2e-server3，开发服务器一键启动
- 🔥 **热更新**: 基于 EventSource 实现实时页面刷新
- 🎨 **现代样式**: Tailwind CSS 4.x + 自定义设计系统
- 🛠️ **TypeScript**: 完整的类型检查和开发体验
- 📦 **高性能构建**: esbuild 提供极速的打包体验
- 🎯 **组件演示**: 内置功能展示和代码示例

## 🚀 快速开始

### 环境要求

- Node.js 16+ / Bun / Deno
- npm / yarn / pnpm

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 [http://localhost:2850](http://localhost:2850) 查看应用

### 构建生产版本

```bash
npm run build
```

## 📁 项目结构

```
f2e-create-template/
├── src/
│   ├── index.tsx          # React 应用入口
│   └── index.css          # Tailwind CSS 样式入口
├── index.html             # HTML 模板
├── start.mjs              # f2e-server3 配置
├── tailwind.config.js     # Tailwind 配置
├── tsconfig.json          # TypeScript 配置
├── biome.json            # 代码格式化配置
└── package.json          # 项目依赖
```

## 🎨 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| React | 19.0.0 | 前端框架 |
| TypeScript | 5.x | 类型安全 |
| Tailwind CSS | 4.1.5 | 原子化样式 |
| f2e-server3 | 1.13.7 | 开发服务器 |
| esbuild | 0.25.0 | 快速构建 |
| Biome | 2.3.2 | 代码检查 |

## 💻 开发命令

```bash
# 开发模式
npm run dev

# 构建生产版本
npm run build

# 代码格式化
npm run lint
```

## 🎪 功能演示

启动开发服务器后，你将看到：

- 🔄 **React Hooks 演示**: 状态管理交互示例
- 🎨 **Tailwind 样式**: 渐变、玻璃态、响应式设计
- ⚡ **实时预览**: 代码变更即时反映
- 📱 **响应式布局**: 移动端和桌面端适配

## 🛠️ 自定义配置

### Tailwind CSS 配置

```javascript
// tailwind.config.js
module.exports = {
  content: ["src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    screens: {
      "c-sm": "1440px",  // 自定义断点
      "c-md": "1920px"
    }
  },
  plugins: []
}
```

### 服务器配置

```javascript
// start.mjs
createServer({
  mode: 'dev',
  gzip: true,
  dest: 'output',
  postcss: {
    plugins: [tailwind({ config: './tailwind.config.js' })]
  }
})
```

## 🌟 为什么选择这个模板？

- **零配置启动**: 克隆即用，无需复杂配置
- **现代化技术栈**: React 19 + TypeScript + Tailwind 4.x
- **高性能**: esbuild 提供秒级构建体验
- **开发友好**: 热更新 + 类型检查 + 代码格式化
- **设计优先**: 内置美观的 UI 组件和样式系统

## 📦 部署

### 静态部署

```bash
npm run build
# output 目录即为静态资源，可部署到任意静态服务器
```

### 支持平台

- Vercel
- Netlify
- GitHub Pages
- 传统服务器 (Nginx/Apache)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支: `git checkout -b feature/amazing-feature`
3. 提交更改: `git commit -m 'Add amazing feature'`
4. 推送分支: `git push origin feature/amazing-feature`
5. 创建 Pull Request

## 📄 许可证

ISC License

## 👨‍💻 作者

**shy2850**

---

基于 [f2e-server3](https://gitee.com/f2e-server/f2e-server-3) 构建 • Crafted with ❤️