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