react admin tp

react-admin-tp 後台管理系統項目模版

react-typescript 後台管理系統項目模版、內置動態嵌套路由、數據mock、tailwindcss、? 暗夜模式、動態麵包屑、自定義form 組件。 EN

? 項目概覽

構建工具任選webpack vite

推薦使用腳手架安裝模版react-tp-cli

主要依賴庫

• axios
• ahooks
• tailwindcss
• ant-design
• mobx

打包/開發相關

• 打包入口文件
  • webpack.config.js
  • vite.config.ts
• xxxx.config.js 不同環境打包配置
• 請求代理devServer.proxy
• srcapirequest.ts 可添加請求攔截相關處理邏輯

環境變量

• .env 全局環境變量
• .env.xxxx 動態環境變量

新增环境需要在 scripts 里配置相应指令 cross-env NODE_ENV=(你的环境名)
环境变量文件 你的环境名.config.js .env.你的环境名 即可自动加载

動態路由配置

 // 动态路由配置参考
GLOBAL_ROUTERS . APP_PAGE ;

// 调用这方法设置你的动态路由配置
store . setDynamicRoutes ( routerConfig ) ;

---

項目結構

• api 接口相關
• assets 資源文件
• components 公用組件
• config 公用參數
• layout 公用佈局
• mock 模擬數據
• pages 路由頁面
• router 路由表嵌套路由組件
• store
• types
• utils

需要安裝ESLint、Prettier、Tailwind CSS IntelliSense 插件（牆裂推薦安裝）
環境變量和打包配置動態加載安裝完項目依賴後再提交代碼，保持項目整潔
homepage 相關文件、構建指令皆可刪除

安裝依賴

 // 没有pnpm的话先安装pnpm
npm i pnpm -g

// 安装依赖
pnpm i

項目啟動

 // dev
pnpm start

// pro
pnpm build

如有問題請提issue 倉庫地址issue☹ star★