Code Monkey home page Code Monkey logo

react-template-admin's Introduction

一个轻量级 React18 后端管理模板,旨在快速搭建后端管理系统包含基础功能不做过渡封装,快速扩展

技术栈:

  • react18
  • react-router6
  • zustand4
  • vite4
  • axios
  • fakerjs、
  • dayjs ......

支持的功能:

  • 登录/退出登录
  • 数据持久化存储
  • 路由鉴权
  • 动态主题
  • 错误处理
  • axios 封装

目录结构

├─ 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

# 预览
pnpm preview

运行效果(账号密码随便填)

git 提交

# 添加到暂存区
git add -A

# 提交代码
pnpm cz
按照提示下一步就行,.cz-config.js可以修改提示相关配置

最后

目前还有很多不足的地方,如果你觉得有不错的想法及更好的实现可以提 pr,大家一起学习进步~
如果你觉得这个项目还不错,点个 star ⭐️ 支持一下 thanks~

react-template-admin's People

Contributors

panyushan-jade avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.