# react-demo **Repository Path**: jiangyalong/react-demo ## Basic Information - **Project Name**: react-demo - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-28 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README <<<<<<< HEAD ## React 后台管理系统 > [项目预览地址](https://ltadpoles.github.io/#/index) 基于 `React` 生态系统搭建的后台管理系统模板 此项目为闲暇时间所做，主要是为了熟悉 `React` 项目的开发流程，打造一个快速开发后台管理系统的模板 既为模板，可能就添加了一些你觉得并不需要的东西，比如菜单栏收缩将判断值存储在 `Redux` 之中，其实完全可以采用组件传值的方式解决，并不需要引入 `Redux` 。添加这个东西只是为了方便项目的拓展、展示它的使用方式。当然，如果你不需要，完全可以很简单的移除它们 由于每个管理项目可能会有不同的定制化需求，所以对于模板中的一些功能并没有做完善的封装，比如对 `axios` 的封装、前端路由权限的控制。当然，结构或者思路已经存在代码之中了,只需要添加具体的业务代码即可 此项目会不断进行优化迭代，后期可能会增加 `react-hook` 版本 如果觉得不错或者对你有些许的帮助，欢迎 `star`，或者你有更好的实现方式、有趣的 `idea`，也欢迎留言交流 如果你想了解项目更为详细的信息，推荐阅读以下文章 - [如何打造 react 后台管理系统](https://github.com/ltadpoles/web-document/blob/master/React/%E5%BF%AB%E9%80%9F%E6%89%93%E9%80%A0react%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F.md) 以下为项目基本信息↓ ### 技术栈 `React@16.10.1 + React-Router@5.1.1 + Redux@4.0.4 + Antd@3.23.5 + Axios@0.19.0` > `Create React App` 脚手架工具快速搭建项目结构 > `react-loadable@5.5.0` 路由懒加载 > `react-redux@7.1.1` 配合 `Redux` 更舒心 > `animate.css@3.7.2` 页面动画展示 > `braft-editor@2.3.8` 富文本插件 > `echarts@4.4.0` 数据可视化 > `nprogress@0.2.0` 顶部加载条 > `screenfull@5.0.0` 全屏插件 > `prettier@1.18.2` 代码风格统一 ### 基本功能 - [x] 路由懒加载 - [x] 面包屑导航 - [x] 常用 UI 展示 - [x] echarts 全屏展示 - [x] 登陆/注销功能 - [x] axios 封装 - [x] 简单权限管理 ### 项目结构 ``` ├── public # 不参与编译的资源文件 ├── src # 主程序目录 │ ├── api # axios 封装 │ ├── assets # 资源文件 │ │ ├── font # 字体文件 │ │ └── images # 图片资源 │ ├── components # 全局公共组件 │ │ ├── CustomBreadcrumb # 面包屑导航 │ │ └── CustomMenu # menu 菜单 │ ├── contatiners # 页面结构组件 │ ├── routes # 路由目录 │ ├── store # redux 配置 │ ├── style # 样式目录 │ ├── utils # 工具类 │ ├── views # UI 页面 │ ├── APP.js # App.js │ └── index.js # index.js ├── .prettierrc.js # 代码规范 ├── config-overrides.js # antd 样式按需加载 ``` ### 使用方法 ```npm git clone https://github.com/ltadpoles/react-admin.git cd react-admin // 安装依赖 yarn // 启动 yarn start // 打包 yarn build ``` ### 截图 ![image](https://raw.githubusercontent.com/ltadpoles/react-admin/master/src/assets/images/index.jpg) ![image](https://raw.githubusercontent.com/ltadpoles/react-admin/master/src/assets/images/form.jpg) ![image](https://raw.githubusercontent.com/ltadpoles/react-admin/master/src/assets/images/editor.jpg) ======= # react-demo #### 介绍 {**以下是码云平台说明，您可以替换此简介** 码云是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台 无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)} #### 软件架构 软件架构说明 #### 安装教程 1. xxxx 2. xxxx 3. xxxx #### 使用说明 1. xxxx 2. xxxx 3. xxxx #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 码云特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目 5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) >>>>>>> ff8c0a35aa9eaafd22585159bb556ad8b8631223