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