使用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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容