背景
現(xiàn)在公司的主要技術(shù)棧是React,所以也想著能夠搭建一個(gè)好的React前端框架，方便在工作中使用清笨。主要用到的庫月杉。
- React、TypeScript
- React-Router抠艾、Redux
- Antd苛萎、Less
- Axios、Mockjs检号、http-proxy-middleware
- Webpack腌歉、Babel、Eslint谨敛、Prettier
功能
- 登錄 注銷 演示頁面
- 全局功能
動態(tài)側(cè)邊欄
多頁面切換- Redux狀態(tài)管理
- Mocker 數(shù)據(jù)
- webpack 打包優(yōu)化 antd按需加載
- hooks
項(xiàng)目效果
登錄
主菜單
項(xiàng)目結(jié)構(gòu)說明
├── README.md
├── craco.config.js
├── mocker
├── package-lock.json
├── package.json # package.json
├── public # 靜態(tài)資源
├── src
│ ├── assets #靜態(tài)資源
│ │ ├── 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
目錄
引言
第一章：項(xiàng)目創(chuàng)建究履、antd、less
第二章：路由攔截脸狸、路由嵌套
第三章：狀態(tài)管理 Redux
第四章：網(wǎng)絡(luò)請求最仑、代理、mockjs
第五章：webpack配置
第六章：Eslint
