一、首先进入一个文件夹，输入cmd打开命令框

二、使用vite创建React项目

npm create vite@latest my_project

三、选择React框架

四、选择变体

1. TypeScript

• 核心：使用 TypeScript 作为开发语言（JavaScript 的超集，增加了「类型系统」）。
• 特点：在代码编写时强制类型检查，能提前捕获类型错误（比如变量类型不匹配），适合大型项目或团队协作，提升代码可维护性。
• 适合：需要严格类型约束、长期维护的项目。

2. TypeScript + React Compiler

• 核心：基于 TypeScript，额外集成 React 官方编译器（实验性工具）。
• 特点：React 编译器可自动优化 React 组件的重渲染逻辑（比如减少不必要的更新），无需手动写 useMemo/useCallback，提升性能和开发效率。
• 适合：希望利用 React 新特性优化性能，且熟悉 TypeScript 的项目。

3. TypeScript + SWC

• 核心：TypeScript 语言 + SWC 编译器（替代传统的 Babel）。
• 特点：SWC 是用 Rust 编写的超快编译器，比 Babel 编译速度快 10-100 倍，能显著提升项目的构建（打包）和热更新速度。
• 适合：追求开发效率（快速编译），且需要 TypeScript 类型支持的项目。

4. JavaScript

• 核心：使用 标准 JavaScript 作为开发语言（无类型检查）。
• 特点：语法更灵活，学习成本低，适合快速原型开发或小型项目。
• 适合：对类型约束要求不高，想快速启动项目的场景。

5. JavaScript + React Compiler

• 核心：JavaScript 语言 + React 官方编译器（同选项 2 的编译器）。
• 特点：用原生 JS 开发，同时享受 React 编译器的性能优化，适合不想要 TypeScript 但想优化组件渲染的项目。

6. JavaScript + SWC

• 核心：JavaScript 语言 + SWC 编译器（同选项 3 的编译器）。
• 特点：用原生 JS 开发，同时通过 SWC 提升构建速度，适合追求开发效率的小型 JS 项目。

7. React Router v7

• 核心：基于 JavaScript + React Router v7（React 生态中最流行的路由库）。
• 特点：预配置了路由功能，可轻松实现多页面跳转（比如从首页到详情页）、路由参数、嵌套路由等。
• 适合：需要多页面导航的应用（如后台管理系统、电商网站）。

8. TanStack Router

• 核心：基于 JavaScript + TanStack Router（新一代路由库，比 React Router 更现代）。
• 特点：支持类型安全（即使在 JS 中也能通过推断减少错误）、嵌套路由优化、加载状态管理等，功能更强大但学习成本稍高。
• 适合：需要复杂路由逻辑（如动态路由、并行加载）的中大型项目。

9. RedwoodSDK

• 核心：基于 RedwoodJS（全栈框架，底层用 React）。
• 特点：整合了前端（React）、后端（Node.js）、数据库（Prisma）等全栈工具链，支持快速开发全栈应用（前后端一体）。
• 适合：想同时开发前端和后端，且希望工具链高度集成的场景。

10. RSC

• 核心：基于 React Server Components（React 服务器组件）。
• 特点：允许组件在服务器端渲染（而非仅在浏览器），减少客户端 JavaScript 体积，提升首屏加载速度，适合对性能要求极高的应用。
• 注意：RSC 目前是 React 的高级特性，需要一定的服务器配置知识。

11. Vike

• 核心：基于 Vike（基于 Vite 的元框架，支持 React 等库）。
• 特点：支持服务器端渲染（SSR）、静态站点生成（SSG）、客户端渲染（CSR）等多种渲染模式，灵活适配不同场景。
• 适合：需要灵活选择渲染模式（比如部分页面静态生成，部分动态渲染）的项目。

选择建议：

• 新手 / 快速开发：选 JavaScript 或 TypeScript（根据是否需要类型检查）。
• 追求构建速度：加 + SWC（比如 TypeScript + SWC）。
• 需要多页面路由：选 React Router v7（简单场景）或 TanStack Router（复杂场景）。
• 全栈开发：选 RedwoodSDK。
• 性能优化需求高：尝试 + React Compiler 或 RSC（需一定经验）。

五、进入到该目录

cd my_project

六、安装tailwindcss

npm install -D tailwindcss@3.4.17 postcss autoprefixer

七、初始化tailwindcss

npx tailwindcss init -p