# react-template **Repository Path**: maxudong12/react-template ## Basic Information - **Project Name**: react-template - **Description**: react react-router-dom redux - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: dev - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-11-24 - **Last Updated**: 2024-06-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # react-template #### 特别提示 请使用以下命令来创建页面组件（可以根据路由访问的组件） * 创建路由 ``` npm run new:view 后根据提示进行操作 ``` * 删除路由 ``` npm run remove:view 后根据提示进行操作 ``` * 更新路由 ``` npm run updateRouter 如果没有使用命令创建、删除 操作后执行此命令 或者修改 文件、文件夹名称、位置后执行此命令 修改文件的meta后 ``` * 如果为手动创建组件请务必保证拥有index.jsx文件 * 如果需要添加meta请务必保证在index.jsx开始位置使用如下模板 * ``` /***********#************** * Author = 创建作者 * createTime = 创建时间 * describe = 文件描述 * ---------meta数据--------- * title = 这是页面的title * ***********#**************/ ``` #### 使用技术 * 脚手架：vite * 前端框架：react * 交互工具：axios * UI框架：antd * 前端路由：react-router-dom * 数据存储：redux * 调试工具：React Developer Tools + Redux DevTools #### 项目起步 1. 安装依赖 ``` npm install ``` 2. 运行项目 ``` npm run dev ``` 3. 打包项目 ``` npm run build ``` #### 文件、文件夹说明 * file：创建组件文件所需文件 不会进入打包文件 * public：不需要进行编译的文件 会放在打包后的根目录 * src * http：请求相关文件 目前是对axios的配置 * component：封装的组件 * routes：路由相关文件 * store：redux相关文件 * actionCreator：action创建函数文件夹 * constant.js：action所需type存储文件 * tools：常用的工具函数 * view：页面视图文件夹 * App.jsx：根组件，配置有redux更新后刷新页面、调用路由跳转前、后函数 * main.jsx：主文件，render根组件、全局配置antd #### 组件文档 ##### JForm组件 | 字段 | 说明 | 必填？ | 默认值 | 可选值 | | -------- | ---------------------------------------- | ------ | ----------------------- | -------------------- | | btn | btn slot | 否 | `` | | | btnSpan | 同CoL组件的span 按钮占有的位置大小 | 否 | 2 | 1、2、3、4、6、8、12 | | btnClick | 点击事件 | 否 | `()=>{}` | 函数 | | btnText | 按钮显示的文字 | 否 | 查询 | 字符串 | | formList | 显示的表单列表 详细可见下列formList类型 | 是 | | 数组 | | lineNum | 一行显示的个数 | 否 | 2 | 1、2、3、4、6、8、12 | | valueMap | 表单绑定的对象 useState创建的值 | 是 | | | | setWhere | useState创建的修改的函数 | 是 | | | **formList类型** | 字段 | 说明 | 必填？ | 默认值 | 可选值 | | --------------------------------------------------------- | -------------- | ------ | ------ | ------------------------------------- | | type | 现在组件的类型 | 是 | | input、select、timePicker、datePicker | | field | 对应的字段 | 是 | | | | label | 展示的名称 | 是 | | | | 例如写的是input 那么所有antd里Input的属性都可以写在这里 | | | | | ##### JScrollBar | 字段 | 说明 | 必填？ | 默认值 | 可选值 | | ------ | ------------------ | ------ | ------ | ------ | | height | 超过多少展示滚动条 | 否 | 100% | | ##### JTable | 字段 | 说明 | 必填？ | 默认值 | 可选值 | | ----------------------------------- | ------------------ | ------ | ------ | ---------- | | header | slot | 否 | ’‘ | react 组件 | | requestAddress | 列表显示数据的地址 | 是 | | | | 所有antd中table的属性都可以写在这里 | | | | | 暴漏出来getList方法可以通过ref获取 #### 更新日志 ##### 2021-11-29 * redux增加数据持久化 ##### 2022-11-30 * 修改创建组件命令 路由根据文件自动生成 增加404页面 增加删除、更新操作命令 ##### 2022-12-01 * 新增组件时新增路由增加描述注释，根据描述注释生成对应路由_meta对象 * 页面组件默认传递meta对象 使用props.meta可以拿到 * 前置路由守卫、后置路由守卫 location对象增加meta ##### 2021-11-29 * redux增加数据持久化 ##### 2022-11-30 * 修改创建组件命令 路由根据文件自动生成 增加404页面 增加删除、更新操作命令 ##### 2022-12-01 * 新增组件时新增路由增加描述注释，根据描述注释生成对应路由meta对象 * 页面组件默认传递meta对象 使用props._meta可以拿到 * 前置路由守卫、后置路由守卫 location对象增加meta * 修改部分bug ##### 2022-12-7 * 增加滚动条组件 * 二次封装Table组件 * 修改部分文件操作命令逻辑 * 增加 `/src/routes/menu.js`文件 配置侧边菜单栏 ##### 2022-12-8 * 增加文件变更后自动更新路由功能 * 修改部分bug ##### 2022-12-9 * 增加JForm组件 * 修改JTable组件 * 修改readme文件 ##### 2023-3-13 * 增加滚动条拖动 #### 预计后期会加由于技术原因暂未添加的功能 1. 文件删除后、新增、修改meta后自动调用`npm run updateRouter`命令(已增加) 2. 滚动条可以使用鼠标拖动（已增加） 3. 优化监听元素宽高变化的方法 #### 后期会添加的功能 1. 组件的参数验证 2. 横向滚动条