開源項目推薦：React18、TS、Vite、Antd5 開箱即用的中后臺前端項目
共 4395字，需瀏覽 9分鐘
·
2024-06-27 09:42
點擊上方 前端Q，關注公眾號
回復加群，加入前端Q技術交流群
近期發(fā)現(xiàn)很多小伙伴的簡歷難以區(qū)別于其他人，項目比較單一。
-
比如有小伙伴沒接觸過小程序開發(fā)、腳手架開發(fā)、圖片編輯器、數(shù)據(jù)大屏等開發(fā)。 -
我一般都是建議多找找一些開源項目，學習掌握透徹后，也可以參與貢獻代碼，可以寫到簡歷上（如果公司想招有類似項目經(jīng)驗的就會加分）。 -
github上有很多開源項目，平時多積累學習，真正需要時，不至于束手無措。 -
后續(xù)也會多推薦一些實用的開源項目，拓寬大家的視野。
github: https://github.com/southliu/react-admin
技術棧：react18 + ts + antd5 + vite 等等 在線體驗：https://southliu.github.io
我大致看了一下源碼，相對簡單些，有很多值得學習的。
以下是該項目的README介紹。
South Admin
? 簡介
使用React18,Typescript,Vite,Antd5.0等主流技術開發(fā)的開箱即用的中后臺前端項目，Vite實現(xiàn)自動生成路由，支持KeepAlive功能，react-redux狀態(tài)管理，支持虛擬滾動表格，UnoCss開發(fā)樣式。
?? 項目演示
演示地址[1]
?? 安裝使用
-
獲取項目代碼
git clone https://github.com/southliu/react-admin.git
-
選擇目錄
cd react-admin
-
安裝全局依賴依賴，存在則不用安裝
npm i -g pnpm
-
安裝依賴
pnpm install
如果使用pnpm安裝依賴出現(xiàn)安裝失敗問題，請使用梯子或yarn安裝。
-
運行
pnpm dev
-
打包
pnpm build
?? 圖標(iconify)
-
參考 iconify官方地址[2] -
VS Code安裝Iconify IntelliSense - 圖標內(nèi)聯(lián)顯示和自動補全
??? Git 提交示例
Git提交不規(guī)范會導致無法提交，feat關鍵字可以按照下面Git 貢獻提交規(guī)范來替換。
git add .
git commit -m "feat: 新增功能"
git push
按照以上規(guī)范依舊無法提交代碼，請在終端執(zhí)行npx husky install之后重新提交。
?? Git 貢獻提交規(guī)范
-
參考 vue[3] 規(guī)范
-
feat增加新功能 -
fix修復問題/BUG -
style代碼風格相關無影響運行結果的 -
perf優(yōu)化/性能提升 -
refactor重構 -
revert撤銷修改 -
test測試相關 -
docs文檔/注釋 -
chore依賴更新/腳手架配置修改等 -
workflow工作流改進 -
ci持續(xù)集成 -
types類型定義文件更改 -
wip開發(fā)中
?? 路由
路由根據(jù)文件夾路徑自動生成，路徑包含以下文件名或文件夾名稱則不生成：
-
components -
utils -
lib -
hooks -
model.tsx -
404.tsx
可自行在 src/router/utils/config.ts 修改路由生成規(guī)則。
?? 關于封裝
-
功能擴展，在原有的api上拓展。 -
功能整合，合并兩個或兩個以上組件的api。 -
樣式統(tǒng)一，避免后期樣式變動，導致牽一發(fā)而動全身。 -
公共組件二次封裝或常用組件使用Basic開頭，便于區(qū)分。
演示地址: https://southliu.github.io/
[2]iconify官方地址: https://icon-sets.iconify.design/
[3]vue: https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md
往期推薦
最后
歡迎加我微信，拉你進技術群，長期交流學習...
歡迎關注「前端Q」,認真學前端，做個專業(yè)的技術人...