個人開發(fā)學習react web后臺管理系統(tǒng)項目，持續(xù)開發(fā)中，可以相互學習探討。
豬豬管家
一、介紹 ??
?????? 豬豬管家， 基于 React18.2.0、webpack5.0.1、react-router-dom6.6.2、TypeScript、Ant-Design 開源的一套后臺管理框架。recoil 作為狀態(tài)管理，axios 作為網(wǎng)絡請求，開箱即用，支持配置多種菜單模式，路由權限配置。
二、Git 倉庫地址 (歡迎 Star?)
三、?????? 項目功能
- ?? 采用最新技術找開發(fā)：React18、React-Router v6、React-Hooks、TypeScript、Webpack5
- ?? 采用 Webpack 作為項目開發(fā)、打包工具（配置了 Gzip 打包、打包預覽工具……）
- ?? 整個項目集成了 TypeScript ??
- ?? 使用 recoil 做狀態(tài)管理，集成 redux-persist 開發(fā)
- ?? 使用 TypeScript 對 Axios 整個二次封裝 （全局錯誤攔截、常用請求封裝、取消重復請求……）
- ?? 支持 暗黑 && 亮色切換，mix、side、top 菜單模式、不同主題色切換
- ?? 使用 自定義高階組件 進行路由權限攔截（403 頁面）
- ?? 支持 React-Router v6 路由懶加載配置、菜單手風琴模式、無限級菜單、多標簽頁、面包屑導航
- ?? 使用 Prettier 統(tǒng)一格式化代碼，集成 Eslint、Stylelint 代碼校驗規(guī)范（項目規(guī)范配置）
- ?? 使用 husky、lint-staged、commitlint、commitizen、cz-git 規(guī)范提交信息（項目規(guī)范配置）
四、安裝使用步驟 ??
- Clone：
# GitHub
git clone https://github.com/bigTig/react-webpack-ts.git
- Install：
yarn
- Run：
yarn start
# 開發(fā)環(huán)境
yarn build:dev
# 測試環(huán)境
yarn build:pre
# 生產(chǎn)環(huán)境
yarn build:prod
# 代碼分析
yarn build:analy
- Lint：
# eslint 檢測代碼
yarn lint:eslint
# prettier 格式化代碼
yarn lint:prettier
# stylelint 格式化樣式
yarn lint:less
- commit：
# 提交代碼（會自動執(zhí)行 lint:lint-staged 命令）
git commit
五、文件資源目錄 ??
react-webpack-ts
├─ .husky # 添加git hooks
├─ .vscode # vscode推薦配置
├─ public # 靜態(tài)資源文件（忽略打包）
├─ src
│ ├─ api # API 接口管理
│ ├─ assets # 靜態(tài)資源文件
│ ├─ components # 全局組件
│ ├─ config # 全局配置項
│ ├─ core # 核心庫
│ ├─ hooks # 常用 Hooks
│ ├─ layouts # 框架布局
│ ├─ routers # 路由管理
│ ├─ store # redux store
│ ├─ styles # 全局樣式
│ ├─ typings # 全局 ts 聲明
│ ├─ utils # 工具庫
│ ├─ pages # 項目所有頁面
│ ├─ app.less # 全局樣式處理
│ ├─ App.tsx # 入口頁面
│ └─ index.tsx # 入口文件
├─ .browserslistrc # 瀏覽器兼容列表
├─ .cz-config.js # cz-git 規(guī)范提交信息
├─ .editorconfig # 編輯器配置（格式化）
├─ .eslintignore # 忽略 Eslint 校驗
├─ .eslintrc.js # Eslint 校驗配置
├─ .gitignore # git 提交忽略
├─ .prettierignore # 忽略 prettier 格式化
├─ .prettierrc.js # prettier 配置
├─ .stylelintignore # 忽略 stylelint 格式化
├─ .stylelintrc.js # stylelint 樣式格式化配置
├─ babel.config.js # babel 轉(zhuǎn)換配置
├─ commitlint.config.js # git 提交規(guī)范配置
├─ LICENSE # 開源協(xié)議文件
├─ package-lock.json # 依賴包包版本鎖
├─ package.json # 依賴包管理
├─ postcss.config.js # postcss 配置
├─ README.md # README 介紹
├─ tsconfig.json # typescript 全局配置
六、瀏覽器支持
默認支持以下瀏覽器。更多瀏覽器可以查看 Can I Use Es Module > ?? 請不要使用 QQ 瀏覽器開發(fā)，QQ 瀏覽器 不識別 某些 ES6 以上語法
七、捐贈 ??
如果你正在使用這個項目或者喜歡這個項目的，可以通過以下方式支持我
- Star、Fork、Watch 一鍵三連 ????
