# react 开箱即用 **Repository Path**: logicjwell/backstage ## Basic Information - **Project Name**: react 开箱即用 - **Description**: 后台管理模板 1 资料整理 2 项目总结 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2024-09-06 - **Last Updated**: 2024-09-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 常东东 造轮子 ## 吾生也有涯，而知也无涯。 ### 介绍 #### 基于 之前项目总结(学习门户 备课端 授课端 学习端 编创端 编创后台 umijs2.0 & 3.0 & reactCreat )&网络博客学习汇总 == cli React18、 Vite2、 React-Router v6、 React-Hooks、 Redux、 TypeScript、 Ahooks、 函数库 Ant-Design 脚手架。 ### 项目功能 - 🚀 采用最新技术找开发：React18、React-Router v6、React-Hooks、TypeScript、Vite2 - 🚀 采用 Vite2 作为项目开发、打包工具（配置了 Gzip 打包、跨域代理、打包预览工具……） - 🚀 整个项目集成了 TypeScript 🤣 - 🚀 使用 redux 做状态管理，集成 immer、react-redux、redux-persist、redux-thunk 开发 - 🚀 使用 TypeScript 对 Axios 整个二次封装 （全局错误拦截、常用请求封装、全局请求 Loading、取消重复请求……） - 🚀 支持 Antd 组件大小切换、暗黑 && 灰色 && 色弱模式、i18n 国际化（i18n 暂时没配置所有文件，根据项目自行配置） - 🚀 使用 自定义高阶组件 进行路由权限拦截（403 页面）、页面按钮权限配置 - 🚀 支持 React-Router v6 路由懒加载配置、菜单手风琴模式、无限级菜单、多标签页、面包屑导航 - 🚀 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范（项目规范配置） - 🚀 使用 husky、lint-staged、commitlint、commitizen、cz-git 规范提交信息（项目规范配置） 常用功能的 - 🚀 🚀 省市区三级联动 - 🚀 🚀 CodeMirror实现代码对比功能 待配置项 - 🚀 🚀 工具函数库 ahooks 库已配置 https://ahooks.js.org/zh-CN/hooks/use-unmount - 🚀 🚀 关于页面的动画效果参考Ant Motion官网 ### 四、安装使用步骤 📑 - **Install：** ```text npm install cnpm install # npm install 安装失败,请升级nodejs到16以上,或尝试使用以下命令nvm请自行配置 npm install --registry=https://registry.npm.taobao.org ``` - **Run：** ```text npm run dev npm run serve ``` - **Build：** ```text # 开发环境 npm run build:dev # 测试环境 npm run build:test # 生产环境 npm run build:pro ``` - **Lint：** ```text # eslint 检测代码 npm run lint:eslint # prettier 格式化代码 npm run lint:prettier # stylelint 格式化样式 lint:stylelint ``` - **commit：** ```text # 提交代码（会自动执行 lint:lint-staged 命令） npm run commit ``` ### 文件资源目录 ```text Hooks-Admin ├─ .husky # commit的时候做一些风格的校验工作，包括commit信息格式化和文件格式化。 ├─ .vscode # vscode推荐配置 ├─ public # 静态资源文件（忽略打包） ├─ src │ ├─ api # API 接口管理 │ ├─ assets # 静态资源文件 │ ├─ components # 全局组件 │ ├─ config # 全局配置项 │ ├─ enums # 项目枚举 │ ├─ hooks # 常用 Hooks │ ├─ language # 语言国际化 │ ├─ layouts # 框架布局 │ ├─ routers # 路由管理 │ ├─ redux # redux store │ ├─ styles # 全局样式 │ ├─ typings # 全局 ts 声明 │ ├─ utils # 工具库 │ ├─ views # 项目所有页面 │ ├─ App.tsx # 入口页面 │ ├─ main.tsx # 入口文件 │ └─ env.d.ts # vite 声明文件 ├─ .editorconfig # 编辑器配置（格式化） ├─ .env # vite 常用配置 ├─ .env.development # 开发环境配置 ├─ .env.production # 生产环境配置 ├─ .env.test # 测试环境配置 ├─ .eslintignore # 忽略 Eslint 校验 ├─ .eslintrc.js # Eslint 校验配置 ├─ .gitignore # git 提交忽略 ├─ .prettierignore # 忽略 prettier 格式化 ├─ .prettierrc.js # prettier 配置 ├─ .stylelintignore # 忽略 stylelint 格式化 ├─ .stylelintrc.js # stylelint 样式格式化配置 ├─ CHANGELOG.md # 项目更新日志 ├─ commitlint.config.js # git 提交规范配置 ├─ index.html # 入口 html 项目中唯一页面 ├─ LICENSE # 开源协议文件 ├─ lint-staged.config # lint-staged 配置文件 ├─ package-lock.json # 依赖包包版本锁 ├─ package.json # 依赖包管理 ├─ postcss.config.js # postcss 配置 ├─ README.md # README 介绍 ├─ tsconfig.json # typescript 全局配置 └─ vite.config.ts # vite 配置 ``` ### 规范的代码块 文件注释 ``` 使用vscode 插件即可 文件 /** * @Author: changDongdong * @Date: 2022-03-06 15:03:33 * @Description: 打补丁，处理xx模块的xx逻辑 */ 方法 /** * @description 日期格式化 * @param {string} fmt YYYY-mm-dd YYYY-mm-dd HH:MM:SS * @param {object} date 日期对象 * @returns {String} 日期格式化后数据 */ ``` ### 浏览器支持 ... ### 项目后台接口链接 ... ### 项目ui链接 ... ### 项目人员配比 ... ### 项目原型 ... ### 项目版本编号期限 ... ### 补充学习hoc高阶函数（啧 面试官他不会他还问我 栓q ） end~ 人生天地之间,若白驹过隙,忽然而已😔