Xin_RC_front 环境搭建

node.js（安装最新版本即可）
npm（用 cnpm 或 yarn 能节约你安装依赖的时间）
git
clone 项目代码：git clone http://192.168.1.2:10101/r/Xin_RC_front.git

• 进入 Xin_RC_front 目录

• npm install 安装插件

• npm start 启动本地开发环境

框架介绍

使用Node.js、Umi、React(React-router，Redux)、Dva.js、Antd、css-modules 开发

• Node.js

• Dva.js 扩展React框架

• React、Redux

• Ant-desgin Web端UI框架

• Umi 企业级react应用框架,蚂蚁金服的底层前端框架

• Ant-design-pro 基于 React 的中后台管理控制台的脚手 (目前使用2.x版本)

• css-modules css模块化方案

  相关技术点可参考:

• Dva.js:https://dvajs.com/guide/

• Antd:https://ant.design/index-cn

• Umi:https://umijs.org/zh/ 或 https://umijs.org/config/

• Ant-design-pro:https://v2-pro.ant.design/index-cn

• css-modles：https://github.com/css-modules/css-modules 、https://v2-pro.ant.design/docs/style-cn

• 其他：lodash JavaScript 工具库 https://www.lodashjs.com/docs/latest

项目程序结构

该项目目前包含主要模块：

• 项目策划

• 组件库

• 质量管理

• 模型管理

• 现场巡检

• 巡检GIS

项目目录结构说明

Xin_RC_front

├── config // 编译时配置文件 同 .umirc.js

│ ├──config.js // 基础配置

│ ├──plugin.config.js // 插件配置

│ └──router.config.js // 路由配置

├── mock // 本地模拟数据

├── scripts // 构建相关

├── src // 约定 src 为源码目录

│ ├── assets //本地静态资源

│ ├── components // 业务通用组件

│ ├── e2e

│ ├── layouts // 通用布局

│ ├── models // 全局model

│ ├── pages // 业务页面入口和常用模板

│ │ ├── document.ejs // html模板

│ │ ├── Authorized.js // 权限组件

│ │ ├── 404.js // 错误处理页

│ │ ├── Api // 组件库模块

│ │ ├── Plan // 项目策划模块

│ │ ├── Quality // 质量管理模块

│ │ ├── QualityForm //

│ │ ├── QualityModel //

│ │ ├── Patrol // 现场巡检模块

│ │ ├── GIS // 巡检GIS模块

│ │ ├── User // 用户登录

│ │ ├── Message // 消息通知模块

│ │ └── ModelManage // 模型管理

│ ├── services // 后台接口服务

│ ├── utils // 工具库

│ ├── app.js // 运行时配置文件

│ ├── global.js

│ ├── global.less // 约定的全局样式文件，自动引入件

│ └── manifest.json // 扩展配置

├── .gitignore // git 忽略项

├── .eslintignore // 语法检查忽略配置

├── .eslinttrc.js // 语法规范

├── package.json // 包依赖配置

└── README.md // Xin_RC_front说明文件

其他说明

路由：

约定式路由：umi 会根据 pages 目录自动生成路由配置

配置式路由：在config/config.(ts|js) 配置文件中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析该项目采用配置式路由

src/global.(css|less|sass|scss)：此文件不走 css modules，且会自动被引入，可以在这里写全局样式，以及做样式覆盖。

models：

在 umi 中，挂载了 dva 的插件之后 models 下的文件会被默认当做 dva model 引入，所以不再需要在 models/index.js 中来手动挂载 model。

运行程序

执行命令：npm install

执行命令：npm start