迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:react-big-screen开源软件地址:https://gitee.com/MTrun/react-big-screen开源软件介绍:QQ交流群: 713105837 开源项目Vue/Vue3/React-big-screen交流群 QQ群二维码: 一、项目描述
友情链接:
项目界面图: 二、文件目录介绍Project├── mock 模拟数据├── src│ │ ├── assets 静态资源│ │ ├── components 各个模块组件│ │ ├── models Dva模型管理│ │ ├── routes 路由主界面定义│ │ ├── services 异步获取函数│ │ ├── style 全局样式│ │ └── utils 工具函数│ ││ ├── index.js 主函数文件│ └── router.jsx 路由定义文件│└── .roadhogrc.mock.js 导出模拟数据 三、详情介绍启动项目需要提前安装好 数据请求模拟项目采用 Dva 自带模拟数据方式,数据放置在 接口 Api 请求函数写在 请求函数使用 界面获取 mock 数据与 图表组件图表组件主要使用了 ECharts 和 DataV 可视化框架来进行开发。图表文件在 样式编写样式编写使用了 样式文件 style: import styled from 'styled-components';// 生成 div 标签export const Index = styled.div` display: flex; flex-direction: column; align-items: center;`; 使用方式: import { Index } from './style';//...... render() { return ( // 编译之后内容被 div 标签包裹 <Index> 内容 </Index> ) }
全局样式通过 icon 文件icon 文件使用
import { createGlobalStyle } from 'styled-components';// 使用 styled-components 全局注册函数包裹内容并导出export const Iconstyle = createGlobalStyle` @font-face {font-family: "iconfont"; ......`- 与全局样式一样在 `router.jsx` 中进行注册。 屏幕适配本项目借助了 // flexible文件位置: `common/flexible.js`,修改部分如下function refreshRem() { var width = docEl.getBoundingClientRect().width; // 最小1366px,最大适配2560px if (width / dpr < 1366) { width = 1366 * dpr; } else if (width / dpr > 2560) { width = 2560 * dpr; } // 原项目是1920px我设置成24等份,这样1rem就是80px var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;} 解决 Dva 版本 history 报错的问题找到 node_modules 中的 dva 包,修改 lib/index.js。 22 行: var _createHashHistory = _interopRequireDefault( require('history').createHashHistory); 修改启动端口项目运行编译中,端口若出现冲突提示并同意 "start": "set PORT=9000 && roadhog server", 使用 Hook如果需要使用 Hook 而非 Class 编写代码,请先卸载当前react,然后安装支持 Hook 的 React(>=16.8),当前项目是 Dva 脚手架生成的,暂不支持 Hook。 四、更新情况后面可能会请朋友将项目修改为 Hook版本,切一个分支出来,也许会鸽 |
2022-08-15
2022-08-17
2023-10-27
2022-09-23
2022-08-13
请发表评论