Are you ok?你还在 Create React App？Vite 都卷到飞起了你还不加入？🔥 CRA 是过去式

俺是编程彭于晏，俺喂自己袋盐 look my eyes, tell me why？你还在用 Create React App？Why?

一、背景

随着 React 官方正式弃用 Create React App（CRA），你还在用它启动项目吗？

在前端技术飞速发展的今天，CRA 已逐渐被更现代、更高效的脚手架替代。目前主流的 React 工程化方案主要包括：

Vite + React（轻量级首选）
- 极速冷启动（基于原生 ESModules）
- 快速热更新（HMR）
- 灵活的插件生态与配置能力
- 支持 TypeScript/JSX
- 已成为社区默认标准
Next.js（全栈/SSR 项目首选）
- 内置 SSR、SSG、API Routes
- 支持 React Server Components & Streaming
- 官方维护（由 Vercel 提供支持）
- 默认构建引擎逐步过渡到高性能的 Turbopack

📌 本文重点聚焦 Vite + React，从零搭建你的现代前端项目。

二、什么是 Vite？

Vite（发音 /vit/，同 "veet"）是一种现代前端构建工具，目标是提供更快、更流畅的开发体验。由尤雨溪大神（Vue 作者）主导开发，怎能不快？

Vite 提供了多个模板预设，支持几乎所有主流框架，包括：

JavaScript / TypeScript / Vue / React / Svelte / Solid / Qwik / Preact / Lit

三、使用 Vite 初始化 React 项目

确保你使用的是 Node.js 20+ 版本（推荐用 nvm 管理）。

# 方式一：交互式初始化
npm create vite@latest

# 方式二：指定项目名称和模板
npm create vite@latest my-react-app -- --template react-ts

四、环境变量配置（开发与构建）

使用 .env 文件定义环境变量，比如 .env.dev、.env.prod，示例配置如下：

env
VITE_ENV=DEV
VITE_BASE_URL=https://your-api.example.com

在项目中使用方式如下：

ts
export const ENV = import.meta.env.VITE_ENV;
export const BASE_URL = import.meta.env.VITE_BASE_URL;

启动与构建脚本配置：

json
"scripts": {
  "dev": "vite",
  "build": "tsc -b && vite build",
  "dev:dev": "vite --mode dev --port 8000 --host",
  "dev:prod": "vite --mode prod --port 8000 --host",
  "build:dev": "tsc -b && vite build --mode dev",
  "build:prod": "tsc -b && vite build --mode prod"
}

--mode dev 环境文件
--port 8000 本地端口
--host network端口
tsc -b && vite build

TypeScript 编译器检查并编译代码 正确后执行vite build

五、常用依赖集成

1. 引入 Ant Design（推荐自定义主题）

npm install antd

配置方式：

tsx
import { App as AntdApp, ConfigProvider } from "antd";
import { StyleProvider } from "@ant-design/cssinjs";

<ConfigProvider
  locale={zhCN}
  theme={{
    token: {
      colorPrimary: "#27DE67",
    },
    components: {
      Avatar: {
        colorTextPlaceholder: "#27DE67"
      }
    }
  }}
>
  <StyleProvider hashPriority="high">
    <AntdApp>
      <App />
    </AntdApp>
  </StyleProvider>
</ConfigProvider>

hashPriority="high" 可确保本地主题样式优先级更高。

2. 引入 Axios 并封装请求

npm install axios

ts
import axios, {
  AxiosInstance,
  AxiosError,
  AxiosResponse,
  InternalAxiosRequestConfig,
} from "axios";

export const instance: AxiosInstance = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

// 请求/响应拦截器
instance.interceptors.request.use(/* ... */);
instance.interceptors.response.use(/* ... */);

3. 工具库：dayjs、lodash-es、md5

npm install dayjs lodash-es md5

4. 状态管理推荐：Zustand（轻量无脑）

npm install zustand

定义 store：

ts
import { create } from "zustand";

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

组件中使用：

tsx
const count = useCounterStore((state) => state.count);
const increment = useCounterStore((state) => state.increment);
const decrement = useCounterStore((state) => state.decrement);

5. 引入 Tailwind CSS

Vite + Tailwind 完美融合

5.1 安装

npm install tailwindcss @tailwindcss/vite

5.2 配置 vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
});

5.3 global.css中引用

@import "tailwindcss";

文档参考：tailwindcss.com/docs/instal…

总结

还在用 CRA 吗？该告别了。

Vite + React 正在成为新一代前端开发的标配。更快的启动速度、更灵活的配置能力、更强大的生态兼容性，几乎在任何维度都超越了 CRA。前端开发新时代，从一行 Vite 命令开始。