乐趣区

一個简洁的-antdreactadmin-应用-React-Antd-通用后台管理系统

jiezi

React-Antd-Admin

简介

React-Antd-Admin，一个 JavaScript 应用，项目由业界最优秀的 React 应用开发工具 create-react-app 初始化创建，搭配 Antd 开箱即用的高质量 React 组件，非常适合后台产品。

React-Antd-Admin 同时也是个很好的前端脚手架学习示例，如果你在学习 React 或即将学习 React，它应该可以做为教程给你一些帮助。如果你准备使用 React 全家桶开发应用，它能够快速给你提供项目脚手架，为你节省前期部分工作。让我们一起享受整个 React 生态圈和工具链带来的愉悦开发体验。

在开始之前，推荐先学习 React、ES2015、ES6、Node.js、Webpack 等知识，并正确安装和配置了 Node.js 环境。

技术栈

  • Create React App
  • Antd-Design
  • React
  • React-Router
  • React-Redux
  • Webpack
  • ECMAScript 6
  • Babel

项目预览

还是先睹为快吧，建议 Chrome 浏览器预览，Live-Demo

功能

该项目基本搭建了一个企业级管理系统骨架，提供通用组件及页面扩展，不涉及业务逻辑开发。具体功能如下：

  • 基本登录、登出
  • 路由及菜单权限管理
  • 支持多页签、面包屑导航
  • 系统设置
  • antd 官方组件及第三方组件···
  • ···

项目结构 

├── src                     项目主文件目录
│   ├── assets              样式图片及 SVG 文件
│   │   └── ...
│   ├── axios               axios 请求
│   │   └── ...
│   ├── components          组件
│   │   ├── xxx.js
│   │   └── ...
│   ├── redux               redux 目录
│   │   ├── actions
│   │   │   └── xxx.js
│   │   ├── constants
│   │   │   └── xxx.js
│   │   ├── reducers
│   │   │   └── xxx.js
│   │   └── store.js
│   ├── router              路由配置
│   │   ├── xxx.js
│   │   └── ...
│   ├── utils               工具
│   │   └── xxx.js
│   └── views               页面目录
│       ├── layout
│       │   │── xxx.js
│       │   └── ...
│       └── xx
│           │── xxx.js
│           └── ...
└── package.json

开始

克隆源碼 

git clone https://github.com/chenjun1127/react-antd-admin.git

安裝依賴 

cd react-antd-admin
npm i or yarn

调试 

npm start

发布应用 

npm run build

Github 源码

致谢

  • Create React App
  • Antd-Design
  • React

欢迎 star 支持

退出移动版