一個簡潔的 antd-react-admin 應用 -- React + Antd 通用後臺管理系統

React-Antd-Admin

簡介

React-Antd-Admin，一個 JavaScript 應用，項目由業界最優秀的 React 應用開發工具 create-react-app 初始化建立， 搭配 Antd 開箱即用的高質量 React 組件，很是適合後臺產品。

React-Antd-Admin 同時也是個很好的前端腳手架學習示例，若是你在學習 React 或即將學習 React，它應該能夠作爲教程給你一些幫助。若是你準備使用 React 全家桶開發應用，它可以快速給你提供項目腳手架，爲你節省前期部分工做。 讓咱們一塊兒享受整個 React 生態圈和工具鏈帶來的愉悅開發體驗。

在開始以前，推薦先學習 React、 ES201五、ES六、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 支持