很难过 Create React App 被时代淘汰，现在我们用 Vite 开发 React + Ant Design 吧。
很难过 CSS 被时代淘汰（明明没有好不好！），现在我们用 Tailwind CSS 吧。
很难过 yarn 被时代淘汰，现在我们用 pnpm 吧。
写在前面
- 本流程会尽量贴出原文档链接，因为所有文章都可能会过期，对照着官方文档是最靠谱的。
- 有人喜欢大而全的"模板"方案，而我更喜欢可组合可拆分的"积木"型方案。因为大而全可能有以下问题：魔改了一些东西但你不知道、依赖包过期了但不更新、想改配置但不知道如何下手等等。当然，不是所有的大而全方案都有问题，但这纯粹依赖作者的个人品味。
- 其实本文中还可以添加 stylelint（有 Tailwind CSS 不再写大量组件 CSS，但还是可能写一部分）、React 状态管理方案等，但未写入，感兴趣的可自行添加最合适的。
1. 用 Vite 生成一个 React + TypeScript 项目
pnpm create vite my-react-app --template react-ts
2. 按照提示进入项目，安装依赖：
cd my-react-app
pnpm install
3. 安装 Ant Design 相关依赖
pnpm add antd @ant-design/icons
4. 修改 vite.config.ts 为如下内容：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
],
});
vitejs.dev/config/
github.com/onebay/vite…
5. 安装 Tailwind CSS 相关依赖
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Tailwind CSS，用过都说好！几乎不用再添加 less/scss 文件，不用切换文件改完 CSS 再切回来，直接修改组件的 className 即可，"最短修改路径"，便捷简洁现代化！（当然如果不想用可以不安装）
6. 按照 Tailwind CSS 官方指南配置
注意：TypeScript 项目中不支持 .js 配置文件，需使用 .cjs 文件。
postcss.config.cjs 内容：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tailwind.config.cjs 内容：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
重命名 index.css 为 main.css，修改其内容为：
@tailwind base;
@tailwind components;
@tailwind utilities;
6. 安装 ESLint 相关依赖
pnpm add -D eslint eslint-config-react-app
虽然 create-react-app 被淘汰了，但它的 ESLint 规则还是最权威的，开发 React 项目的最佳规范！
7. 安装 Prettier 相关依赖
pnpm add -D prettier eslint-config-prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss
github.com/prettier/es…
github.com/simonhaenis…
github.com/tailwindlab…
prettier-plugin-organize-imports，一个非常好用的对 import 进行自动排序的 Prettier 插件，用了就回不去了！
prettier-plugin-tailwindcss，一个非常好用的对 Tailwind CSS 的 className 进行自动排序的 Prettier 插件，用了就回不去了！
8. 添加 .eslintrc.cjs
touch .eslintrc.cjs
module.exports = {
extends: ['react-app', 'prettier'],
};
9. 添加 .prettierrc.cjs
touch .prettierrc.cjs
module.exports = {
singleQuote: true,
plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'], organizeImportsSkipDestructiveCodeActions: true,
};
10. 大功告成，试试吧！
删除 App.css，修改 App.tsx 文件为：
import { useState } from 'react';
import { Button } from 'antd';
import { AlertOutlined } from '@ant-design/icons';
import reactLogo from './assets/react.svg';
function App() {
const [count, setCount] = useState(0);
return (
<div className="grid place-content-center h-screen text-center text-lg">
<div className="flex mx-auto items-center gap-8">
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src="/vite.svg" className="w-28" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
<img
src={reactLogo}
className="w-32 animate-spin [animation-duration:10s]"
alt="React logo"
/>
</a>
</div>
<h1 className="my-20 font-semibold text-6xl">Vite + React</h1>
<div>
<Button
className="inline-flex items-center rounded-md"
size="large"
icon={<AlertOutlined />}
onClick={() => setCount((count) => count + 1)}
>
count is {count}
</Button>
<p className="mt-4 mb-12">
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="opacity-40">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
启动项目：
pnpm run dev
耶寺！点开本地开发链接看看效果吧！
附赠
以上 shell 命令的合订版：
pnpm create vite my-react-app --template react-ts
cd my-react-app
pnpm install
pnpm add antd @ant-design/icons
pnpm add -D tailwindcss postcss autoprefixer eslint eslint-config-react-app prettier eslint-config-prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss
npx tailwindcss init
touch postcss.config.cjs
touch .eslintrc.cjs
touch .prettierrc.cjs
