基于antd的react后台项目模版,typescript开发

1,761 阅读2分钟

react-admin-template

由于现有的一些 react admin 项目都太过复杂,集成了一些我不太需要的功能,所以决定自己撸一个,全面面向 react hooks。 基于 antd 的 react 后台管理项目模板,使用 typescript 开发。本项目创意来自 vue-admin-template。 没有使用官方的脚手架工具,使用 webpack 打包项目。 只集成了基本功能,后续其他功能可以轻松扩展。给一些 react 中后台项目提供了开箱即用的模版工程

用法

git clone https://github.com/xhuz/react-admin-template.git

npm install

npm run dll

npm run dev

在 4000 端口开启一个开发服务器

功能

  1. 实现静态路由,通过静态路由自动生成菜单,路由 lazy 加载,优化性能
  2. 实现路由守卫,管理登陆状态,如果有权限的需求也可以自己进一步扩展
  3. 集成 redux 状态管理,redux-thunk 用来执行异步操作
  4. 全面面向 react hook 编程
  5. 支持 css module,支持 css 和 sass,对 less 有需求可以自行配置 webpack
  6. 集成 styled-jsx,支持 sass
  7. 封装 axios 保证类型安全
  8. 封装两个自定义钩子,useGetter 更方便的操作 store,useEffectDispatch 用于派发异步 Action
  9. webpack hot reload 实现
  10. 集成 antd,按需加载

目录介绍

├── build // webpack 配置
├── src
│ ├── api // 用于和服务端交互的方法
│ ├── components // 公共的组件
│ ├── environment // 配置多环境打包
│ ├── hooks // 自定义钩子
│ ├── icons // svg icon
│ ├── router // 静态路由配置和路由守卫
│ ├── store // redux
│ ├── styles // 全局样式和scss变量
│ ├── utils // 工具方法
│ ├── views // 放置视图
│ ├── index.html // 入口模版文件
│ ├── main.tsx // 打包的入口文件
│ ├── App.tsx // 整个app的入口
│ └── typing.d.ts // 定义全局类型
├── package-lock.json
├── package.json
├── tsconfig.build.json // 因为webpack配置也是用ts开发,提供给webpack使用的tsconfig
└── tsconfig.json // 项目的ts配置

npm script

npm run dll //只用于开发环境,提前打包dll,提高开发时编译速度

npm run dev // 启动开发服务器

npm run build // 打包生产环境

npm run analyz // 用于分析打包出来的bundle性能

npm run format // prettier 格式化代码

npm run lint // eslint 检查代码

项目已上传的github有兴趣的可以star收藏react-admin-template