使用React、antd、ts从零搭建框架--项目说明
2021-11-10 本文已影响0人
被偷的贼
背景
现在公司的主要技术栈是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
