Skip to content
/ react-admin-tp Public template

🧑🏻‍💻 React backend management system template | React 后台管理系统项目模版内置菜单路由、状态管理多环境打包等工具开箱即用。脚手架工具:https://github.com/wanpan11/react-template-cli

Notifications You must be signed in to change notification settings

wanpan11/react-admin-tp

Repository files navigation

📊 react-admin-tp 后台管理系统项目模版

react-typescript 后台管理系统项目模版、内置动态嵌套路由、数据 mock、tailwindcss、🌙 暗夜模式、动态面包屑、自定义 form 组件。 EN

Static Badge Static Badge Static Badge Static Badge Static Badge Static Badge

🏠 项目概览

构建工具任选 webpack vite

Static Badge Static Badge

推荐使用脚手架安装模版 react-tp-cli

主要依赖库

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

打包/开发相关

  • 打包入口文件
    • webpack.config.js
    • vite.config.ts
  • xxxx.config.js 不同环境打包配置
  • 请求代理 devServer.proxy
  • src\api\request.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★

Security Status

About

🧑🏻‍💻 React backend management system template | React 后台管理系统项目模版内置菜单路由、状态管理多环境打包等工具开箱即用。脚手架工具:https://github.com/wanpan11/react-template-cli

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published