Vite + React + Antd Mobile 组件库

功能

1. 使用了postcss实现px to rem
2. 使用zustand作为全局缓存库，并依赖其功能实现了基本的i18n国际化
3. 配置了icon-park，即字节旗下ico库
4. 对react-router-dom进行了功能封装
5. 使用Ant Design Mobile与Layout实现了带有Tabbar的公共模版
6. 使用axios-hooks库作为请求库，并对axios进行少量封装
7. 自定义hooks: useLocation、useI18n、useSessionStorage
8. 基于js-qr实现了浏览器扫码功能组件QRScanner

说明

1. 配置axios的基地址直接修改env配置字段VITE_BASE_URL
2. 全局根字体大小断点（src/index.css）

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 100%; } /* 小屏幕设备（如手机）*/ @media (max-width: 600px) { html { font-size: 90%; /* 字体稍微小一点 */ } } /* 中等屏幕设备（如平板）*/ @media (min-width: 601px) and (max-width: 1024px) { html { font-size: 100%; /* 标准大小 */ } } /* 大屏幕设备（如桌面）*/ @media (min-width: 1025px) { html { font-size: 110%; /* 字体稍微大一点 */ } }

3. 组件库全局配色（src/index.css）

:root { --primary-color: #FFC300; } :root:root { --adm-color-primary: #FFC300; --adm-color-success: #00b578; --adm-color-warning: #ff8f1f; --adm-color-danger: #ff3141; --adm-color-white: #ffffff; --adm-color-text: #333333; --adm-color-text-secondary: #666666; --adm-color-weak: #999999; --adm-color-light: #cccccc; --adm-color-border: #eeeeee; --adm-color-box: #f5f5f5; --adm-color-background: #ffffff; --adm-font-size-main: var(--adm-font-size-5); --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue', helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; }

4. 修改语言

const i18nStore = useI18nStore();
i18nStore.changeLanguage("en_US");
i18nStore.changeLanguage("zh_CN");

其他语言可自行扩展，在App.tsx中，使用useI18nStorehooks 同步修改了组件库的国际化配置

const i18nStore = useI18nStore();
return (
  <>
    <ConfigProvider locale={i18nStore.lang === "en_US" ? enUS : zhCN}>
      <RenderRoutes />
    </ConfigProvider>
  </>
);

5. 使用 i18n

const t = useI18n();

<p>t('index.title"')</p>;

国际化文字映射在src/locales文件夹下

6. 发送请求

首先在src/api中新增请求文件xxx.ts，并定义返回值与参数的ts interface，利用 axios-hooks发送对应的http请求

import useAxios from "axios-hooks";
import { Page, Result } from "@/types/http";

export interface MockResult {
  id: number;
}

export interface MockPage {
  id: number;
}

/**
 * fetch the data
 * 详细使用可以查看 useAxios 的文档
 */
export const useFetchXXX = () => {
  // set the url
  const url = `/xxx/xxx`;
  // fetch the data
  const [{ data, loading, error }, refetch] = useAxios < Result < MockResult >> url;
  // to do something
  return { data, loading, error, refetch };
};

/**
 * fetch the data with page
 * 详细使用可以查看 useAxios 的文档
 */
export const useFetchPageXXX = (page: number, size: number) => {
  // set the url
  const url = `/xxx/xxx?page=${page}&size=${size}`;
  // fetch the data
  const [{ data, loading, error }, refetch] = useAxios < Page < MockResult >> url;
  // to do something
  return { data, loading, error, refetch };
};

useAxios返回值分别为数据、状态、错误、操作对象(refetch用于中断请求)

7. 路由与缓存配置可直接参考代码

补充

pnpm i

pnpm run dev