一、工程目录结构以及目录介绍
1、环境
node >= 4
npm >= 3
2、项目启动
npm install
npm start
访问 http://127.0.0.1:8989
3、工程目录
│ package.json //依赖资源配置文件
│ proxy.config.js //代理配资文件,可配置对请求进行拦截,返回自定义数据,方便单元测试.
│ webpack.config.js //webpack打包配置文件
├─dist //打包生成部署文件目录
├─project //项目源代码
│ │index.html //项目入口文件模板
│ ├─auth //授权,预校验
│ ├─component //项目组件(基于业务场景对基础组件的封装,达到项目内代码高复用)
│ ├─constant // 常量目录
│ │ ├─javascript //常量API接口,项目公共参数等
│ │ └─styles //项目UI码值配置,html样式重置表,公共的样式函数等
│ ├─container //业务场景容器
│ ├─entry //webpack打包入口文件
│ │ index.js
│ │ index.less
│ ├─lib //项目常用类库
│ ├─route //项目路由系统,配置路由
│ │ index.js
│ └─util //工具包
│ ├─common
│ │ fetch.js //fetch请求,用于与后端服务请求交互
│ │ verify.js // 通用校验
│ └─decorator
│ context-decorator.jsx //装饰器,将router(路由)包裹在组件上,所有组件所需的全局变量可在此文件中配置
├─scripts //编译打包脚本,无须变更
├─src //信美组件类库,基于antd,外围组件,结合信美品牌文化封装特有的基础组件,打包成trust或trust-mobile类库,全项目组复用
│ └─trust
│ ├─components
│ ├─styles
│ │ index.less
│ └─utils
│ └─hoc
│ index.jsx
└─static //静态资源目录
二、重要模块的使用说明以及参数说明
1、component目录下
-
Heade模块 具体使用方式可见文件Heade.md。 -
Menu模块 具体使用方式可见文件Menu.md。 -
PaginationTable模块 是对antd中Table组件的封装。具体使用方式可见文件PaginationTable.md。 -
Upload模块 是对antd中upload组件的封装。具体使用方式可见文件Upload.md。
2、src目录下trust模块
改模块下封装了一些常用的表单组件，基于antd表单组件做了简化。详细使用方式见trust/doc目录
// 引入方式;