使用React、antd、ts从零搭建框架--项目说明

背景

现在公司的主要技术栈是React,所以也想着能够搭建一个好的React前端框架，方便在工作中使用。主要用到的库。

• React、TypeScript
• React-Router、Redux
• Antd、Less
• Axios、Mockjs、http-proxy-middleware
• Webpack、Babel、Eslint、Prettier

功能

• 登录 注销 演示页面
• 全局功能
  动态侧边栏
  多页面切换
• Redux状态管理
• Mocker 数据
• webpack 打包优化 antd按需加载
• hooks

项目效果

登录

主菜单

项目结构说明

├── README.md
├── craco.config.js
├── mocker
├── package-lock.json
├── package.json            # package.json
├── public                  # 静态资源
├── src
│   ├── assets              #静态资源
│   │   ├── images          #图片
│   │   └── style           #全局样式
│   ├── component
│   ├── config              #全局配置
│   │   ├── index.ts
│   │   ├── menu.ts
│   │   └── routes.ts
│   ├── index.tsx           #入口文件
│   ├── logo.svg
│   ├── pages               #页面
│   │   ├── 404             #404页面
│   │   ├── frame           #框架页面
│   │   │   ├── appRouter.tsx
│   │   ├── home
│   │   ├── login           #登录页面
│   ├── services            #接口
│   ├── store               #全局stores
│   │   ├── index.ts
│   │   └── types.ts
│   └── utils               #工具类
├── tsconfig.json
└── yarn.lock

目录

引言
第一章：项目创建、antd、less
第二章：路由拦截、路由嵌套
第三章：状态管理 Redux
第四章：网络请求、代理、mockjs
第五章：webpack配置
第六章：Eslint

源码地址

https://github.com/dxn920128/cms-base