一、react18+项目初始化

1. npx create-rect-app 项目名称
2. 配置antd design mobile

// 安装
npm install --save antd-mobile
// 在文件中直接引入使用
import { Button } from 'antd-mobile'
<Button></Button>

3. 更改webpack配置

// 1.安装必要的包
npm install craco --save-dev
// 2.修改package.json中的脚本
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
 }
 
 

// 3.创建或修改craco.config.js文件
const path = require('path');

module.exports = {
  style: {
    postcss: {
      loaderOptions: {
        postcssOptions: {
          config: path.resolve(__dirname, "postcss.config.js")
        }
      }
    }
  },
  babel: {
    plugins: [
      ["import", {
        libraryName: "antd-mobile",
        libraryDirectory: "es/components",
        style: false // 禁用自动导入样式（已通过 PostCSS 处理）
      }]
    ]
  },
  webpack: {
    alias: {
      // 添加您想要的别名
      '@': path.resolve(__dirname, 'src/'),
      // 可以添加更多别名，例如：
      '@components': path.resolve(__dirname, 'src/components/'),
      '@assets': path.resolve(__dirname, 'src/assets/')
    }
  }
};

// 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)$/
    })
  ]
};

4. 配置路由(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>
  );
}

5. 配置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