# 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**: 2026-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Tailwind CSS 项目模板

🚀 npm 包名 **f2e-create-template**（`description`: create by f2e-server3）— 基于 f2e-server3 的现代化前端开发模板，开箱即用 React + TypeScript + Tailwind CSS 技术栈。

[![npm version](https://img.shields.io/badge/version-1.1.0-blue.svg)](./package.json)
[![React](https://img.shields.io/badge/React-19.x-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.x-38B2AC.svg)](https://tailwindcss.com)
[![f2e-server3](https://img.shields.io/badge/f2e--server3-1.16.0-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/
├── serve/
│   ├── index.ts           # Node 侧入口（服务端逻辑，经 esbuild 预编译）
│   ├── index.mjs          # compile 脚本输出（勿手改，由 npm run compile 生成）
│   └── api/               # 服务端 API 相关模块
├── src/
│   ├── index.tsx          # React 应用入口
│   └── index.css          # Tailwind CSS 样式入口
├── index.html             # HTML 模板
├── start.mjs              # CLI 入口（package.json main），创建 f2e-server3 服务
├── .esbuildrc.js          # 前端 esbuild 配置（由 f2e-server3 使用）
├── tailwind.config.js     # Tailwind 配置
├── tsconfig.json          # TypeScript 配置
├── biome.json             # Biome 配置
└── package.json           # 项目依赖与脚本
```

## 🎨 技术栈

| 技术 | 版本（见 package.json） | 用途 |
|------|--------------------------|------|
| React | ^19.2.3 | 前端框架 |
| TypeScript | 5.x（tsconfig） | 类型安全 |
| Tailwind CSS | ^4.1.18（@tailwindcss/postcss） | 原子化样式 |
| f2e-server3 | ^1.16.0 | 开发 / 构建服务器 |
| esbuild | ^0.27.2 | 快速打包（含 `serve` 预编译） |
| Biome | ^2.3.10 | 代码检查与格式化（`lint`） |
| chokidar | ^5.0.0 | 文件监听（dev 依赖） |

### package.json keywords

`f2e-server3`、`esbuild`、`react`、`tailwindcss`

## 💻 开发命令

与 `package.json` 中 `scripts` 一致：

```bash
# 仅将 serve/index.ts 预编译为 serve/index.mjs（ESM，供 Node 加载）
npm run compile

# 开发模式：先 compile，再以 dev 模式启动 start.mjs
npm run dev

# 生产构建：先 compile，再以 build 模式运行
npm run build

# 与 dev 相同流程（当前 test 脚本等同于 dev，便于 CI 或自定义对齐）
npm run test

# Biome：检查并自动修复 ./src（含 --fix --unsafe）
npm run lint
```

`dev` / `build` / `test` 都会先执行 `compile`，因为 `start.mjs` 会 `import './serve/index.mjs'`。

## 🎪 功能演示

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

- 🔄 **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,
  gzip: true,
  esbuild: {
    with_bundle_analyze: mode === 'dev',
  },
  postcss: {
    entryPoints: {
      in: 'src/index.css',
      out: 'static/index.css',
    },
    plugins: [
      tailwind({ config: './tailwind.config.js' }),
    ],
  },
  try_files: 'index.html',
  dest: 'output',
})
```

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

- **零配置启动**: 克隆即用，无需复杂配置
- **现代化技术栈**: 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

## 📄 许可证

MIT License

## 👨‍💻 作者

**shy2850**

---

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