/tmpl-react-vite

🪞 一个基于 AntD 和 Vite 的 React 项目模板。

Primary LanguageTypeScriptMIT LicenseMIT

tmpl-react-vite

antd vite tailwindcss

一个 React Admin 项目模板，针对现代、传统浏览器分别打包，brotli 压缩

下载

无需安装，本地直接执行 create-hotpot CLI 命令

pnpm create hotpot -t react-vite

预览

Open in StackBlitz

部分目录解释

.
├─ src
│  ├─ components                # 公共业务组件
│  ├─ config                    # 各个工具配置
│  ├─ libs                      # 第三方库文件
│  ├─ openapi                   # OpenAPI 相关配置 & 产物
│  │  ├─ __service__            # 生成产物：TS 类型 & 接口请求方法
│  │  └─ custom-axios.ts        # Axios 配置
│  ├─ pages                     # 页面
│  ├─ service                   # openapi 补充
│  ├─ store                     # 状态管理
│  ├─ styles                    # 全局样式
│  ├─ types                     # 类型管理
│  ├─ utils                     # 工具封装
│  └─ router.ts                 # 自动生成产物：约定式路由相关
└─ orval.config.ts              # 配置产物 openapi/__service__

项目强制使用 pnpm 作为包管理工具，启动项目前请先安装 pnpm

Feature

  • 根据 Swagger 生成 TS 类型 和 接口请求代码
  • 类 NextJs 约定式路由：文件即路由，根据文件结构自动生成 Routes
  • 路由类型安全的侧边栏组件：支持关联嵌套路由
  • 路由类型安全的面包屑组件：支持根据动态路由参数生成面包屑内容
  • 双主题：实现 亮/暗 主题切换
  • 鉴权：用户 登录/鉴权 模块封装完成
  • 状态管理：更加函数式，更加 Hook
  • IconFont：使用 IconFont 管理项目 Icon
  • Formatter & Linter：Prettier + ESLint + StyleLint 配置
  • 自动生成 ChangeLog & 版本管理：代码提交版本号自动更新 & 自动写入 ChangeLog

使用

生成 TS 类型 和 接口请求代码

工具：Orval

配置文件：orval.config.ts，设置 Swagger 来源，支持本地 / 在线 Swagger 文件

执行脚本：pnpm openapi，产物生成在 openapi/__service__ 目录，

./src/openapi/__service__
├─ swagger.msw.ts          # 本地 mock 代码
├─ swagger.schemas.ts      # TS 类型代码
└─ swagger.ts              # 接口请求代码

约定式路由

工具：Generouted

./src
└─ router.ts      # 路由产物代码

侧边栏

示例包括动态路由，嵌套路由以及关联路由配置

./src/config
└─ side-menu.tsx     # 侧边栏配置

面包屑

示例包括常规路由和动态路由面包屑的处理

./src/config
└─ breadcrumb.tsx     # 面包屑配置

亮/暗 主题样式

Antd 5 使用 @ant-design/cssinjs 支持 CSS-in-JS 动态主题变量切换，而 @ant-design/cssinjs 基于 emotion 实现

项目引入：

建议使用 tailwindcss原子类写静态 css样式，与主题相关的动态样式部分则使用 CSS-in-JS 框架

emotion 语法如下，token 是 Antd 内部实现的主题变量

import { css } from '@emotion/react';

css`
  color: ${token.colorPrimary};
  &:hover {
    color: ${token.colorPrimaryHover};
  }
`;

用户鉴权 & 函数式状态管理库 zustand

全局状态管理工具使用 zustand 示例代码为用户鉴权模块

./src/store
└─ auth.ts     # 鉴权模块

图标管理

./src/components
└─ icon.tsx           # IconFont 组件封装

替换内部变量 scriptUrl 为开发者项目 IconFont 产物地址

代码提交流程

  • 开发调试：pnpm dev
  • 开发模拟正式：pnpm build & pnpm preview
  • 正式版提交：pnpm release