|
| 1 | +# react-admin-template |
| 2 | + |
| 3 | +**中文** | [English](./README.md) |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +> 这是一个基础的 react admin 管理后台。 |
| 8 | +
|
| 9 | + |
| 10 | +本架构使用的技术为:react17+vite2+ant4 新一代的前端框架,It's fast! |
| 11 | + |
| 12 | +使用 eslint+prettier+gitHooks 格式和校验代码,提高代码规范性和开发效率 |
| 13 | + |
| 14 | +## 更新日志 |
| 15 | + |
| 16 | +```javascript |
| 17 | +//10-08 |
| 18 | +add error log collection func |
| 19 | +``` |
| 20 | + |
| 21 | + |
| 22 | +## 线上体验 |
| 23 | + |
| 24 | +[github address](https://github.com/jzfai/react-admin-template.git) |
| 25 | + |
| 26 | +[Access address](http://8.135.1.141/react-admin-template) |
| 27 | + |
| 28 | +github 地址: https://github.com/jzfai/react-admin-template.git |
| 29 | + |
| 30 | +国内体验地址:http://8.135.1.141/react-admin-template |
| 31 | + |
| 32 | + |
| 33 | +## 例子 |
| 34 | + |
| 35 | + ---- 我们先看看加载速度和构建后的包大小: |
| 36 | + |
| 37 | + |
| 38 | + |
| 39 | + |
| 40 | + |
| 41 | +## 相关项目 |
| 42 | + |
| 43 | +框架有js,ts和plus版本 |
| 44 | + |
| 45 | +- js版本:[vue3-element-admin](https://github.com/jzfai/vue3-admin-template.git) |
| 46 | +- ts版本:[vue3-element-ts](https://github.com/jzfai/vue3-admin-ts.git) |
| 47 | +- js实例参考plus版本:[vue3-element-plus](https://github.com/jzfai/vue3-admin-plus.git) |
| 48 | +- react版本: [react-admin-template](https://github.com/jzfai/react-admin-template.git) |
| 49 | +- java微服务后台数据:[micro-service-plus](https://github.com/jzfai/micro-service-plus) |
| 50 | + |
| 51 | +> 开发和使用感受:两个字 真香!!!!! |
| 52 | +
|
| 53 | + |
| 54 | +## 文档 |
| 55 | +-- 文档努力开发中。。。。 |
| 56 | + |
| 57 | +可以先参考(和vue-admin-template使用类似):[vue-admin-template使用文档](https://juejin.im/post/59097cd7a22b9d0065fb61d2) |
| 58 | + |
| 59 | + |
| 60 | +#### 和 传统react admin区别 |
| 61 | + |
| 62 | +1.路由配置简单,一次配置即可完成路由生成和页面渲染 |
| 63 | + |
| 64 | +2.采用 react hooks ,写法更加灵活,简单,更易维护和迁移 |
| 65 | + |
| 66 | +3.使用vite2代替webpack 配置更加简单,打包和运行速度更快 |
| 67 | + |
| 68 | + |
| 69 | +[vite2和webpack打包速度上的对比](https://github.com/jzfai/react-admin-template/issues/2) |
| 70 | + |
| 71 | +## 构建步骤 |
| 72 | + |
| 73 | +```bash |
| 74 | +# 克隆项目 |
| 75 | +git clone https://github.com/jzfai/react-admin-template.git |
| 76 | + |
| 77 | +# 进入项目目录 |
| 78 | +cd react-admin-template |
| 79 | + |
| 80 | +# 安装依赖(建议用yarn) |
| 81 | +yarn |
| 82 | + |
| 83 | +# 启动服务 |
| 84 | +yarn run dev |
| 85 | +``` |
| 86 | + |
| 87 | +浏览器访问 http://localhost:5005 |
| 88 | + |
| 89 | + |
| 90 | +## 发布 |
| 91 | + |
| 92 | +```bash |
| 93 | +# 构建测试环境 |
| 94 | +yarn run build-serve |
| 95 | + |
| 96 | +# 构建生产环境 |
| 97 | +yarn run build |
| 98 | +``` |
| 99 | + |
| 100 | +## 其它 |
| 101 | + |
| 102 | +```bash |
| 103 | +# 预览发布环境效果 |
| 104 | +yarn run preview:build-serve |
| 105 | + |
| 106 | +# 预览生产环境 |
| 107 | +yarn run preview |
| 108 | + |
| 109 | +# 代码格式检查并自动修复 |
| 110 | +yarn run lint |
| 111 | +``` |
| 112 | + |
| 113 | +## 功能 |
| 114 | + |
| 115 | +``` |
| 116 | +- 登录 / 注销 |
| 117 | +
|
| 118 | +- 权限验证 |
| 119 | + - 页面权限 |
| 120 | + - 指令权限 |
| 121 | + - 权限配置 |
| 122 | + - 二步登录 |
| 123 | +
|
| 124 | +- 多环境发布 |
| 125 | + - serve |
| 126 | + - build |
| 127 | + - priview |
| 128 | + - lint |
| 129 | +
|
| 130 | +- 全局功能 |
| 131 | + #- 国际化多语言 |
| 132 | + #- 多种动态换肤 |
| 133 | + - 动态侧边栏(支持多级路由嵌套) |
| 134 | + - 动态面包屑 |
| 135 | + - 快捷导航(标签页) |
| 136 | + - Svg Sprite 图标 |
| 137 | + - 本地/后端 mock 数据 |
| 138 | + #- Screenfull全屏 |
| 139 | + - 自适应收缩侧边栏 |
| 140 | +
|
| 141 | +- 编辑器 |
| 142 | + #- 富文本 |
| 143 | + #- Markdown |
| 144 | + #- JSON 等多格式 |
| 145 | +
|
| 146 | +#- Excel |
| 147 | + #- 导出excel |
| 148 | + #- 导入excel |
| 149 | + #- 前端可视化excel |
| 150 | + #- 导出zip |
| 151 | +
|
| 152 | +- 表格 |
| 153 | + #- 动态表格 |
| 154 | + #- 拖拽表格 |
| 155 | + #- 内联编辑 |
| 156 | +
|
| 157 | +- 错误页面 |
| 158 | + #- 401 |
| 159 | + #- 404 |
| 160 | +
|
| 161 | +- 組件 |
| 162 | + - 头像上传 |
| 163 | + - 返回顶部 |
| 164 | + #- 拖拽Dialog |
| 165 | + #- 拖拽Select |
| 166 | + #- 拖拽看板 |
| 167 | + #- 列表拖拽 |
| 168 | + #- SplitPane |
| 169 | + #- Dropzone |
| 170 | + #- Sticky |
| 171 | + #- CountTo |
| 172 | +
|
| 173 | +- 综合实例 |
| 174 | +- 错误日志 |
| 175 | +- Dashboard |
| 176 | +#- 引导页 |
| 177 | +- ECharts 图表 |
| 178 | +#- Clipboard(剪贴复制) |
| 179 | +#- Markdown2html |
| 180 | +``` |
| 181 | + |
| 182 | +>注:#---暂未实现(希望大家能一起开发) |
| 183 | +
|
| 184 | +## 额外 |
| 185 | + |
| 186 | +架构开发不易,如果感觉好,请给我点个赞憋,架构还在不断完善中,欢迎加入我开发,一起成为Contributors !!!! |
| 187 | + |
| 188 | +## 浏览器支持 |
| 189 | + |
| 190 | + |
| 191 | +Modern browsers and Internet Explorer 11+. |
| 192 | + |
| 193 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | |
| 194 | +| --------- | --------- | --------- | --------- | |
| 195 | +|Edge| last 2 versions| last 2 versions| last 2 versions |
| 196 | + |
| 197 | +## 讨论和交流(含react17+ts视频教程) |
| 198 | +[WeChat group](http://8.135.1.141/file/images/wx-groud.png) |
| 199 | + |
| 200 | +## 版本 |
| 201 | + |
| 202 | +[MIT](https://github.com/jzfai/react-admin-template/blob/master/LICENSE) license. |
| 203 | + |
| 204 | +Copyright (c) 2021-present kuanghua |
| 205 | + |
| 206 | + |
| 207 | + |
0 commit comments