Create React App Seasoning Templates

基于 create-react-app + react-app-rewired + Typescript + Less 脚手架初始化，并拓展配置
UI 库默认：antd/antd-mobile（已配置按需加载）
状态管理默认：Mobx
拓展工具库：seasoning（已配置按需加载）
基于以上因素，形成了一个完整的项目业务开发模版cra-template-seasoning

学习使用

• react 的基础知识和常用包
• 使用教程

使用方法

不同的业务模版应对不同的开发场景
pc-admin 有配套后端服务nest-serve，配合可直接使用

初始化安装项目

npx create-react-app my-app --template seasoning // 默认模版
npx create-react-app my-app --template seasoning-mobile // 移动端模版
npx create-react-app my-app --template seasoning-mobile-tabbar // 移动端模版，带上 tabbar
npx create-react-app my-app --template seasoning-pc // PC端模版
npx create-react-app my-app --template seasoning-pc-admin // PC端模版（兼容移动端），带权限控制的管理后台模版
npx create-react-app my-app --template seasoning-primitive // 原生开发模版

可执行脚本

yarn start // 运行开发环境
yarn build // 打包代码
yarn start:https // 运行 https 的开发环境
yarn build:production // 打包不产生映射文件的代码
yarn analyze // 分析包的大小
yarn serve // 运行静态文件服务器，并指向 build 文件夹

src 目录结构

开发项目过程中，一般只会在 src 文件夹下进行开发（未说明的文件一般情况下无需理会）

• apis - 所有接口统一在此封装
• common - 公用功能
  • request - 请求器初始化生成
  • router - 路由生成
  • form - 表单增强模块（可以更快捷方便的使用 antd.Form 或 rc-field-form）
  • PC 端专有
    • antd - 基于 antd 封装了一些高阶组件和函数
    • menu - pc-admin 模版对应的菜单配置（会自动生成路由并注册）
  • 移动端专有
    • compatible - 页面兼容初始化
      • 运行 rem 计算
      • 处理 IOS 键盘收起后视图没有下来
      • Android 键盘弹出时滚动到输入框
    • tabbar - TabBar 页面组件（一般情况会在 router 内部生成并注册对应的路由页面）
• components - 业务组件封装（指会被多次使用或独立于页面外的组件，页面独有组件建议在页面文件夹内开发）
• images - 项目存放图片的地方
• pages - 页面（一般情况下项目以页面为单位创建文件夹，然后在 configs/routers 中配置即可）
• stores - 状态初始化，状态关联函数和状态关联装饰器生成（主状态下有多个子状态，构造函数可执行状态初始化）
• utils - 自定义工具和第三方 sdk 集合
• App.css - 样式初始化
• App.less - 默认样式类
• App.tsx - 页面入口，除了布局组件的插入，一般不会变动
• react-app-env.d.ts - 全局类型声明

pc-admin 效果图（兼容移动端）

如果觉得项目还不错，请打赏一波，您的支持是我最大的动力。