前言
老闆：搞個管理系統，我明天就要。
前端：沒空，誰愛做誰做！(小聲bb)
老闆：（突然抬頭）你説什麼？
前端：好的老闆
用後端的話來説，一個管理系統而已 要不是人手不夠，後端也能做。
看吧，前端就是這麼人微言輕~ 該乾的活還是得幹。
起步
# 使用ant design pro
npm i @ant-design/pro-cli -g
pro create myapp
ok，啓動項目，完成！但真的這麼美好嗎？
問題
上面我們用了antd pro創建了一個react項目，看似很美好簡單，但其實存在以下的問題(個人觀點)
- 集成了dva，基於 redux 和 redux-saga 的數據流方案，dva 還額外內置了 react-router 和 fetch
- 項目代碼的配置、插件、組件過於繁瑣 就好比下載一個360軟件，你電腦上就會多出n個軟件的感覺
- 採用webpack打包，雖説umi3.5採用mfsu，但也是基於webpack5且對應的issue也是非常之多
看張圖感受一下👇
這種數據流方案怎麼樣？是不是又臭又長，基本每個文件都要寫<br/>每次都要connect、dispatch，而且這種還算好的，有的更是多的離譜！
方案
基於上面種種的不爽，所以還是自己搭建一個管理系統吧，相信你項目中的代碼也會有不爽的地方可以分享下你的解決方案，歡迎下方留言探討啊🤞
技術選型
- vite v4：下一代的前端工具鏈，為開發提供極速響應
- react v18：react18也是更新了很多好用的hook
- zustand v4：一個非常好用的狀態管理庫
- react router v6
- typescript
這裏對zustand做個簡單的瞭解，有點類似於mobx並且支持各種中間件
import { create } from 'zustand'
const useBearStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
function BearCounter() {
const bears = useBearStore((state) => state.bears)
return <h1>{bears} around here ...</h1>
}
function Controls() {
const increasePopulation = useBearStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}這就是一個最簡單的store -> ui，是不是特別方便且是以hook的形式在組件中使用，對react技術棧的童鞋簡直不要太友好🎉，官方也橫向對比redux，Why zustand over redux? 具體可以查看官方文檔
再來看下中間件
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
export const useBearStore = create(
persist(
(set, get) => ({
bears: 0,
addABear: () => set({ bears: get().bears + 1 }),
}),
{
name: 'food-storage',
}
)
)通過persist中間件，可以實現本地持久化存儲，刷新頁面會自動將本地數據裝載到store中。以往做法，刷新頁面取出localstorage中的數據存儲到store中，這一套下來挺繁瑣的，這樣看來是不是感覺還挺棒👏👏👏
項目地址
一個輕量級 React18 後端管理模板，旨在快速搭建後端管理系統包含基礎功能不做過渡封裝，快速擴展。家人們，咱們主打就是簡潔快速！
目錄結構
├─ public # 靜態資源
│ ├─ favicon.ico # favicon圖標
├─ src # 項目源代碼
│ ├─ components # 全局公用組件
│ ├─ layout # 佈局組件
│ ├─ config # 全局配置
│ │ └─ router.tsx # 路由配置
│ ├─ services # api接口
│ ├─ stores # 全局 store管理
│ ├─ utils # 全局公用方法
│ ├─ pages # pages 所有頁面
│ ├─ App.tsx # 入口頁面
│ ├─ global.d.ts # 全局聲明文件
│ ├─ index.css # 全局樣式文件
│ └─index.tsx # 源碼入口
└── .commitlintrc.js # 自定義commitlint
└── .cz-config.js # 自定義commitlint
└── .eslintignore # eslint忽略文件
└── .eslintrc.js # eslint配置
└── .prettierrc.js # prettier配置
└── vite.config.js # vite打包配置
└── index.html # html模板
└── package.json # package.json安裝及使用
# 克隆項目
git clone https://github.com/panyushan-jade/react-template-admin.git
# 進入項目目錄
cd react-template-admin
# 安裝依賴
pnpm install(推薦使用pnpm)
# 啓動
pnpm start
# 構建
pnpm build
# 預覽build產物
pnpm preview
支持的功能
- [√] 登錄/退出登錄
- [√] 數據持久化存儲
- [√] 路由鑑權
- [√] 動態主題
- [√] 錯誤處理
- [√] axios 封裝
預覽
題外話
項目使用的是pnpm，pnpm對比npm和yarn有很明顯的優勢，建議大夥都用起來吧。不過 建議node版本14+。此外如果遇見node、pnpm、yarn等版本問題，這裏推薦一個JavaScript工具管理器 Volta。用了都知道，簡直不要太香，nvm可以換掉了。
最後
目前項目還是在迭代和維護中，肯定有很多的不足以及問題，歡迎留言及pr。非常非常非常感謝🤞🤞🤞，如果你覺得這個項目還不錯，點個 star ⭐️ 支持一下 thanks~ 項目地址
