Vite 工程搭建

一、创建工程

React 官方脚手架 create-vite 同样基于 Vite，配置和 Vue 端几乎一致：

npm create vite@latest web-react -- --template react-ts
cd web-react
npm install

用官方 TS 模板，自带 tsconfig 与 vite.config.ts，省去手动配置。

二、目录结构

web-react/
├── public/
├── src/
│   ├── api/            # 接口封装
│   ├── components/     # 通用组件
│   ├── router/         # 路由配置
│   ├── stores/         # Zustand 状态
│   ├── types/          # TS 类型
│   ├── utils/          # 工具函数
│   ├── views/          # 页面
│   ├── App.tsx         # 根组件
│   └── main.tsx        # 入口
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

与 Vue 端结构刻意保持一致，方便对照。两者可共用同一套 types/ 里的接口类型定义。

三、配置 Vite：代理与别名

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/api': { target: 'http://localhost:8080', changeOrigin: true },
    },
  },
})

端口冲突

Vue 端和 React 端默认都占 5173。同时开发时，给 React 端改端口：server: { port: 5174 }。

四、安装路由与状态管理

本教程 React 端选型：

需求	选型	说明
路由	React Router v6	官方路由，目前主流
状态管理	Zustand	轻量、Hooks 风格，适合本项目
UI 组件库	Ant Design	React 生态最流行的企业组件库
HTTP	axios	与 Vue 端统一

npm install react-router-dom zustand axios antd

五、最小可运行骨架

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// src/App.tsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import Home from '@/views/Home'

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/home" replace />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

// src/views/Home.tsx
export default function Home() {
  return <h1>商城首页占位</h1>
}

六、验收

npm run dev

打开 http://localhost:5173/home，看到"商城首页占位"即可。下一章接入路由、Zustand 与登录态。

与 Vue 端的工程对比

两端的工程骨架几乎一样——Vite 配置、目录、代理方式都相同。这说明构建工具是框架无关的，学会了 Vite，Vue/React 通吃。