一、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等等
2. 配置antd design
```javascript
// 安装
npm install --save antd-mobile
// 在文件中直接引入使用
import { Button } from 'antd-mobile'
<Button></Button>
- 更改webpack配置
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: "",// }
});
// 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)
// 安装路由
npm install react-router-dom
// 页面内直接配置
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>);
}
提取路由
// 新建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 参考文档
// 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