react+antd-mobile+vite移动端H5前端项目

React+antd-mobile+vite

尚未实现同一页面缓存可无限跳转自身，并且加载新数据，返回又缓存跳转之前的页面数据的功能（vue项目已实现）

项目地址

脚手架搭建的dome(vue+vite、react+vite、vue+farm、react+farm、vue+rsbuild、react+rsbuild)

环境版本

npm-check-updates@16.14.12 (ncu -u)
nvm@1.1.11
node@20.0.0
npm@9.6.4

项目重要知识点

1. 采用 React18 + vite + redux + react-redux + react-router-dom（v6）
2.可通过配置路由实现页面缓存效果（路由插件+react-activation插件组件构成） 3.
使用 unplugin-auto-import
插件实现自动导入库、方法、函数、自定义等,以$global为前缀作为全局自动导入
4.通过模块化配置vite插件，在vite-config/plugins文件夹下配置vite插件
5.全局方法、变量有：$globalReady、$globalRouter、$globalLazy、$globalKeepRouter
$globalGuard、$globalServicer、$globalRequestUrl、$globalRequest、$globalRedux
$globalReduxAction、$globalNavigate

项目安装

npm install 或 cnpm install

项目启动

npm run vite

项目打包

npm run build:dev
npm run build:prod

项目目录结构

|-- src
|    |-- api // api地址
|    |-- assets // 样式以及图片
|    |-- components // 公共组件
|    |-- hooks // 公用模块
|    |       |-- useCommon.js // 抽离公共函数
|    |       |-- useCustomNavigate.js // 全局自动导入路由跳转方法（针对跳转缓存页面）
|    |       |-- useFetch.js // 全局自动导入请求拼接等处理
|    |       |-- useInitialize.jsx // 全局自动导入初始化
|    |       |-- useKeepRouter.jsx // 全局自动导入路由缓存处理
|    |       |-- useLoadRouter.jsx // 全局自动导入加载路由模块
|    |       |-- usePrompt.jsx // 全局自动导入路由守卫
|    |       |-- useRedux.js // 全局自动导入redux
|    |       |-- useService.js // 全局自动导入请求模块
|    |-- locales // 多语言配置
|    |-- redux // redux
|    |-- router // 路由模块
|    |-- service // 请求模块
|    |-- styles // 公用样式
|    |-- views // 页面
|    |-- main.js // 入口jsx文件
|--vite-config  // vite配置
|     |--plugins // vite插件配置
|     |--index.js // vite处理配置
|--vite-env  // vite环境配置
|     |-- .env    // 本地环境配置
|     |-- .env.dev // 测试环境配置
|     |-- .env.prod // 生产环境配置
|
|-- .eslintrc.js // es配置
|-- babel.config.js // babel配置
|-- vite.config.js // 脚手架配置

vite.config.js 配置说明

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import { baseCfg, pluginCfg } from "./vite-config";
export default async ({ mode }) => {
	const { VITE_BASE_URL } = loadEnv(mode, process.cwd());
	return defineConfig({
		...baseCfg({ VITE_BASE_URL }),
		plugins: [react(), ...(await pluginCfg({ VITE_BASE_URL }))],
	});
};

    (3) 对于vite.config.js配置，通过在vite-config/plugins文件夹下建js文件，在index.js会自动加载，在index.js文件内也可配置vite的基本配置
    (4) 对于unplugin-auto-import.js的配置， 针对react-router-dom、react-i18next页面无需使用例如： import { useNavigate } from "react-router-dom";
       可以直接使用 const navigate = useNavigate();
    (5) 对于unplugin-auto-import.js的配置，针对对象内的配置自定义导入的，key为路径，值为数组的形式，
    数组内的名称必须要与路径配置的文件export {}导
       出的名称一致
    (6) 针对unplugin-auto-import.js的自定义配置导出名称建议都以：$global作前缀定义，以说明是通过插件全局自动导入，
    配置则在unplugin-auto-import.js文件内

项目路由原理

路由大体分为两种：缓存页面、不缓存页面

1.缓存页面：通过路由配置+react-activation插件+自定义useCustomNavigate方法共同构成

2.配置不缓存组件：配置isKeepAlive为fasle或者不配置

   {
        path: "/home",
        element: $globalLazy(React.lazy(() => import("@/views/home/index"))),
        meta: {
            title: "首页"
        }
    }

3.配置缓存路由：
   （1）只要在src/router 内的所有模块js文件内的isKeepAlive设置为true，则页面起缓存效果

   {
        path: "/home",
        element: $globalLazy(React.lazy(() => import("@/views/home/index"))),
        meta: {
            title: "首页",
            isKeepAlive: true
        }
    }

   （3）配置页面缓存,通过配置页面路由加插件进行缓存效果，同时跳转还需要使用自定义hooks方法useCustomNavigate进行跳转到缓存页面,其中customNavigate的使用方式与react-router-dom的const navigate = useNavigate()一致（其实就是包装了useNavigate额外添加清除缓存处理）

    通过配置和跳转实现效果:
    例子：A->B->C, B页面缓存，C倒回B不初始化B页面，当C倒回B,B倒回A后,再由A-B页面会刷新缓存对页面进行重载

    const App = () => {

         const customNavigate = $globalNavigate()

        const goToKeepPage = () =>{
            customNavigate('/detail')
        }

        return (
            <div onClick={()=>{goToKeepPage}}></div>
        )
    };

    export default App

6.路由(编程式)传参
  （1）使用query传参

        跳转：

        接收：

    (2) 使用state传参 (用于传较多参数)

         跳转：

        接收：

项目国际化配置

src/locales文件夹下：
1.ZH-CN文件夹配置中文json
2.US-EN文件夹配置英文json
3.ZH-CN/common.json、US-EN/common.json 中配置时使用：$t("文件名.json文件内定义的key") 如 $t("common.home")
4. 远程接口配置国际化覆盖本地配置：接口返回的json格式要与本地配置的json格式一致才能起到远程覆盖本地的效果

项目 redux 配置

1.src/redux文件夹下的每个【文件夹】代表一个模块
2.模块命名规则：以文件夹作为模块名
3.在模块文件夹内，必须是：reduxAction.js、reduxReducer.js、reduxType.js这三个文件组成，每个js文件对应redux配置
4.使用了react-redux插件来把redux和页面UI关联，使用immer插件来处理redux。
5.页面使用：通过全局导入方法 $globalReduxAction('模块名')导出模块内定义的方法，
 react-redux的connect把state和方法注入页面的prpos中,页面方法可以直接解构出来供使用
import { connect } from "react-redux" // 引入react-redux
const { setShopNum } = $globalReduxAction('common') // 导入模块定义的方法
const Home = (props) => {
    const { setShopNum } =  props
    return (
        <div className="warp">
           
        </div>
    );
};
const mapStateToProps = (state) => state.common;
const mapDispatchToProps = { setShopNum };
export default connect(mapStateToProps, mapDispatchToProps)(Home);