TDL的个人笔记

切换主题

React Vite 项目搭建指南 ​

一、React Vite 脚手架对比 ​

简单直接的回答是：有，而且比 React Native 的选择更多。

在 React Web 开发中，由于没有原生的物理硬件限制，框架的演进方向分成了“极速开发”、“企业级架构”和“极致性能”三个流派。

以下是目前 React 生态中对标 rn-new（或 npx create-expo-app）的几个主流方案：

1. 速度与体验的王者：npm create vite@latest ​

如果你追求的是像 rn-new 那样快速起步、秒级热更新，Vite 是目前全球最流行的选择。

  • 对标点：极速的开发服务器（类似 RN 的渲染响应速度）。
  • 特点：纯净、轻量。它不预设任何架构，只给你一个干净的 React 环境。
  • 适用场景：单页面应用 (SPA)、中小型项目、或者你想完全自己配置架构时。

2. 功能最完备的“全家桶”：npx create-next-app@latest ​

这是目前 React 官方最推荐的生产环境框架，也是跟 rn-new 逻辑最像的——它帮你把路由、API、渲染优化全部配置好了。

  • 对标点：就像 Expo 帮你搞定了导航和原生模块，Next.js 帮你搞定了服务端渲染 (SSR) 和文件系统路由。
  • 特点：自带 SEO 优化、自动分包（Code Splitting）、内置 API Routes。
  • 适用场景：商业级 Web 应用、需要 SEO 的网站、复杂的管理后台。

3. 2026 年的“现代架构”：npx create-t3-app@latest ​

如果你觉得 rn-new 的配置还不够“全”，T3 Stack 则是把所有最顶尖的库缝合在了一起。

  • 对标点：它不仅配置了 React，还把 Tailwind CSS、TypeScript、tRPC（类型安全通信）和 Prisma（数据库 ORM）全部打通。
  • 特点：类型安全（Type Safety）的巅峰。你在后端改一个数据库字段，前端代码会立刻报错，这种体验非常像在 KMP 中共享逻辑。

4. 跨端玩家的终极选：npx create-solito-app@latest ​

既然你之前在研究 Tamagui 和 React Native，这个才是你真正的“本命框架”。

  • 对标点：它同时生成 Expo 项目 (RN) 和 Next.js 项目 (Web)。
  • 核心逻辑：它让你在 packages/app 里写一套代码，通过 Solito 的路由魔法，同时分发到 Web 和 App。

总结对比 ​

命令对应框架核心优势推荐指数
create-viteVite极简、快、自由度最高⭐⭐⭐⭐
create-next-appNext.js功能最强、生态最广、SEO 友好⭐⭐⭐⭐⭐
create-t3-appT3 Stack极致的 TypeScript 协同体验⭐⭐⭐
create-solito-appSolito如果你想要一套代码跑三端⭐⭐⭐⭐

🚀 建议 ​

既然你已经习惯了 React Native + Expo 的开发心智：

  1. 如果你想单独做一个 Web，直接上 npx create-next-app@latest。
  2. 如果你想把现在的 App 变成 Web，调研一下 Solito。

你想看看这几个框架中，哪一个的文件夹结构跟你的 Expo 项目最接近吗？我可以拆解给你看。

二、开箱即用的 React Vite 仓库 ​

开箱即用的react-vite仓库 ​

react-vite-shadcn-ui（最推荐）

GitHub: https://github.com/dan5py/react-vite-shadcn-ui

特点: 开箱即用，包含完整的配置和示例组件

bash
git clone https://github.com/dan5py/react-vite-shadcn-ui.git
cd react-vite-shadcn-ui
pnpm install
pnpm dev

三、纯净 React Vite + 路由 + Tailwind ​

纯净React-vite添加路由和样式React Router + Tailwind CSS ​

bash
pnpm create vite@latest my-project -- --template react-ts
cd my-project
pnpm install

# 路由
pnpm add react-router-dom

# Tailwind
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind 必配：

  • tailwind.config.js：

    js
    /** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

  • src/index.css（全部替换）

    css
    @tailwind base;
@tailwind components;
@tailwind utilities;