一、react18+项目初始化（vite）

react19 使用 antd 兼容问题

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

// 入口处引用

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

npm create vite@latest 项目名称

根据需要选择用vue还是react, 是否使用typescript等等
1. 配置antd design
javascript 复制代码
```
// 安装
npm install --save antd-mobile
// 在文件中直接引入使用
import { Button } from 'antd-mobile'
<Button></Button>
```
更改webpack配置

csharp 复制代码

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path'; // 导入path模块

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [require('postcss-px-to-viewport')], // 使用外部的 postcss.config.js 配置文件
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 将@指向src目录
      // 可以继续添加其他别名
      // 例如：'@components': path.resolve(__dirname, './src/components')
    }
  },
  // server:{
  //   port: "8080",
  //   host: "",
  // }
});

javascript 复制代码

// 4.配置postcss.config.js
const pxToViewport = require('postcss-px-to-viewport-8-plugin');

module.exports = {
  plugins: [
    pxToViewport({
      unitToConvert: 'px',
      viewportWidth: 375,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/, /antd-mobile/],
      include: /\.(css|scss)$/
    })
  ]
};

配置路由(react-router-dom)

javascript 复制代码

// 安装路由
npm install react-router-dom

javascript 复制代码

// 页面内直接配置
import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

const Home = React.lazy(() => import("@/pages/home"))
const Login = React.lazy(() => import("@/pages/login"))

export default function App() {
  return (
    <BrowserRouter>
      <Link to="/login">login</Link>
      <Link to="/home">home</Link>
      <Suspense fallback={ (<div>loading...</div>) }>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="login" element={<Login />} />
          <Route path="home" element={<Home />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

提取路由

javascript 复制代码

// 新建router/index.js,引入组件进行路由配置，导出router实例

const Home = React.lazy(() => import("@/pages/home"))
const Login = React.lazy(() => import("@/pages/login"))

import { createBrowerRouter } from "react-router-dom"
const router = createBrowerRouter([{
	path: '/home',
	element: <Home />
}, {
	path: '/login',
	element: <Login />
}])

export default router

// 在入口文件中渲染<RouterProvider />， 传入router实例
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router'

createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />,
)

配置redux 参考文档

javascript 复制代码

// 1. 安装
npm install @reduxjs/toolkit react-redux
// 2. 创建store文件夹，内有index.js和modules文件夹
// 3. store -> index.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterReducer'
export default configureStore({
  reducer: {
	counter：counterReducer 
  }
})
// 4. 配置modules/counterReducer文件
import {createSlice} from '@reduxjs/toolkit'
export const counterStore = createSlice({
    name: 'counter',
    initialState: {
        count: 1
    },
    reducers: {
        updateData: (state, action) => {
            console.log('state:action', state, action);
            state.count = action.payload
        }
    }
})

// 异步请求部分
const fetchData = () => {
	return async (dispatch) => {
		const res = await 请求方法(请求地址)
		dispatch(updateData(res.data))
	}
}

const { updateData } = counterStore.actions; 
const counterReducer = counterStore.reducer;

export { updateData, fetchData  }
export default counterReducer;
// 5. 配置入口文件
import store from './store'
root.render(
	<Provider store={store}>
		<App />
    </Provider>
)
// 5. 组件中使用
import { useSelector, useDispatch } from "react-redux";
import { updateData, fetchData } from "@/store/modules/counterReducer"
// useSelector 从Store中读取State
const {count} = useSelector((state) => state.counter);
// useDispatch 用来Dispatch Action
const dispatch = useDispatch()
dispatch({ type: 'counter/updateData', payload: 8})
或
dispatch(updateData(8))
// 使用useEffect触发异步请求执行
useEffect(() => {
	dispatch(fetchData())
}, [dispatch])
// 6. 调试工具 Redux-Devtools