Vite+React+ts项目搭建（十分钟搭建个最新版React19项目吧）

Vite+React+ts项目搭建（十分钟搭建个最新版React19项目吧）

1、创建项目

V22.16.0 //版本

yarn create vite 

//选择TypeScript + SWC
yarn  //安装依赖

yarn dev  //启动

启动安装以后如下：

package.json默认如下

{
  "name": "nexus-react-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react-swc": "^4.0.0",
    "eslint": "^9.33.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
    "vite": "^7.1.2"
  }
}

2、项目选择以及区别介绍

🍎 TypeScript

由 Microsoft 开发的超集 JavaScript 的编程语言，引入了静态类型检查。编写 TypeScript 代码时我们可以指定变量、函数的类型。这个就是一个正常的TS的选择

🍎TypeScript + SWC（选择）

这里我们直接选择这个

SWC（Speedy Web Compiler）是一个用 Rust 编写的超快 JavaScript/TypeScript 编译器，旨在提高构建速度。SWC 可以用来代替 Babel，进行 TypeScript 编译和 JavaScript 转换等任务。

作用：

• 加速 TypeScript 的编译速度。
• 提供对 ES6/ES7 等现代 JavaScript 特性的支持。
• 高效的构建和转换过程，尤其适合大型项目。

🍎JavaScript

JavaScript 是一种轻量级的、解释型的编程语言， Web 开发的核心语言，几乎所有的 Web 浏览器都原生支持 JavaScript。

正常最普通的我们都会选择这个

🍎JavaScript + SWC

结合了 SWC 编译器对 JavaScript 的支持，SWC 能够替代 Babel 提供更快的编译过程。SWC 也可以用于 JavaScript 项目，提升构建效率。

作用：

• 加速 JavaScript 项目的构建。
• 对现代 JavaScript 特性提供更高效的支持。
• 适合大型项目，特别是在需要频繁构建的场景下。

🍎React Router v7

React Router 是一个流行的路由库，用于 React 应用程序中的客户端路由。v7 是其最新版本，提供了更多的功能和性能改进。React Router 用于管理 URL 和页面之间的导航，并提供了嵌套路由、懒加载和动态路由等功能。

作用：

• 在 React 应用中处理路由和导航。
• 支持嵌套路由、动态路由和懒加载。
• 提高单页应用（SPA）中的用户体验。

🍎TanStack Router

TanStack Router 是一个新一代的 React 路由库，旨在提供更强大的功能和灵活的配置。它支持灵活的路由模式、API 和嵌套路由功能，针对现代 React 应用进行了优化。

作用：

• 提供更高级的路由功能，例如数据加载、嵌套路由等。
• 灵活的路由配置，适用于大规模和复杂的应用。
• 性能优化和开发者体验提升。

🍎RedwoodSDK

RedwoodJS 是一个全栈 JavaScript 框架，旨在简化 React 和 GraphQL 后端的构建过程。Redwood SDK 是其开发工具包，包含一组工具和 API，帮助开发者快速构建现代的全栈应用。

作用：

• 快速构建全栈 React + GraphQL 应用。
• 提供一整套完整的解决方案，包括前端、后端和数据库的集成。
• 支持无服务器架构，适合构建复杂的 Web 应用。

🍎 RSC (React Server Components)

React Server Components 是 React 团队提出的一个新特性，旨在通过将一些组件的渲染移到服务器端，从而提升 React 应用的性能。它允许在服务器上渲染组件，而不是将所有渲染逻辑都交给客户端。

作用：

• 提高 React 应用的性能，减少客户端负担。
• 服务器端渲染与客户端渲染的更好结合。
• 改善大规模应用的加载时间和交互体验。

3、安装必须依赖

🍎添加react-router-dom路由版本

yarn add react-router-dom@latest

这里我们的版本如下
"react-router-dom": "^7.8.1"

🍎添加antd

yarn add antd@latest

需要注意React19正在兼容，需要额外安装调试

npm install @ant-design/v5-patch-for-react-19 --save

import '@ant-design/v5-patch-for-react-19';

UMD 或微前端应用(可选)

import { unstableSetRender } from 'antd';
import { createRoot } from 'react-dom/client';

// 修改 Antd 内部的渲染方法，适配 React 19
unstableSetRender((node, container) => {
  // 创建或复用 root
  container._reactRoot ||= createRoot(container);
  const root = container._reactRoot;
  root.render(node);

  // 返回卸载函数
  return async () => {
    await new Promise((resolve) => setTimeout(resolve, 0));
    root.unmount();
  };
});

🍎添加 tailwindcss

vite之中使用,这里注意使用新方式

//新方式 
yarn add tailwindcss @tailwindcss/vite

//配置vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

配置样式

@import "tailwindcss";

我们旧的版本如下（在vite和React19 里面我们废弃这种方式 ）

 // 我们旧的版本如下 
yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init

上面的未生效的情况下

// 手动添加tailwind.config.ts

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


// 配置
@tailwind base;
@tailwind components;
@tailwind utilities;

🍎使用fetch请求（fetch、axios二选一）

先来看看fetch和axios区别

• **fetch**：
• 是浏览器原生提供的 API（属于 Web API），无需安装。
• 兼容性：现代浏览器支持，但 IE 不支持 （需用 **polyfill** 如 **whatwg-fetch**）。
• **axios**：
• 是一个第三方库（基于 **XMLHttpRequest** ），需通过 **npm** 或 CDN 引入。
• 兼容性更好，支持旧版浏览器（包括 IE 11）。

---

🍎使用axios（fetch、axios二选一）

yarn add axios

封装模块跟其他的差不多即可

🍎Zustand 状态管理

小型项目我们使用了Zustand，而不是庞大的Redux

React项目中，组件状态管理通常经历三个发展阶段：

1. 组件内状态：小型项目中使用useState足矣
2. Context传递：中型项目通过Context共享状态
3. 全局状态管理：大型项目需要集中式状态管理

yarn add zustand

具体使用看上一篇zustand文章

🍎echarts 图表

yarn add echarts

4、项目设置

🍎alias 别名

npm install --save-dev @types/node
# 或
yarn add --dev @types/node
# 或
pnpm add --save-dev @types/node

配置tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    // 路径映射
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "utils/*": ["src/utils/*"],
      "assets/*": ["src/assets/*"]
    },
    "types": ["node"],
  }
}

配置vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

import tailwindcss from '@tailwindcss/vite'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'components': fileURLToPath(new URL('./src/components', import.meta.url)),
      'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
      'assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
      'hooks': fileURLToPath(new URL('./src/hooks', import.meta.url)),
      'store': fileURLToPath(new URL('./src/store', import.meta.url)),
      'pages': fileURLToPath(new URL('./src/pages', import.meta.url)),
    }
  }
})