资源描述：
《antdesignpro开发手册》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、AntDesignPro开发手册修订历史记录日期版本说明作者目录1.前言1.1目的让不熟悉AntDesignPro的开发人员快速掌握开发方式1.2概述AntDesignPro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成：²ES2015+JavaScript语言的新标准²React用于构建用户界面的JAVASCRIPT库²dva是基于(redux（状态管理）+react-router（路由库）+redux-saga（异步中间件）等)的一层轻量封装²g2一套基于可视化编码的图形语法²antdReact组件1.开发环境2.1Node.js安装配置Node
2、.js安装包及源码下载地址为：https://nodejs.org/en/download/2.2安装方式2.2.1直接clonegit仓库gitclone--depth=1https://github.com/ant-design/ant-design-pro.gitmy-projectcdmy-project2.2.2使用集成化的命令行工具ant-design-pro-cli。npminstallant-design-pro-cli-g#安装脚手架mkdirmy-projectcdmy-projectpronew#创建一个新项目2.3目录结构├──mock#本地模拟数
3、据├──public#公共资源│└──favicon.ico#网站图标├──src│├──assets#本地静态资源│├──common#应用公用配置，如导航信息│├──components#业务通用组件│├──e2e#集成测试用例│├──layouts#通用布局│├──models#数据交互│├──routes#业务页面入口和常用模板│├──services#后台接口服务│├──utils#工具库│├──g2.js#可视化图形配置│├──theme.js#主题配置│├──index.ejs#HTML入口模板│├──index.js#应用入口│├──index.less#
4、全局样式│└──router.js#路由入口├──tests#测试工具├──README.md#项目说明└──package.json#项目配置文件2.4项目初始化2.4.1安装依赖npminstall2.4.2启动应用npmstart2.4.3打包npmrunbuild该命令会生成*.js、*.css、index.html等静态文件1.开发指导3.1开发规范3.2开发流程示意图3.3开发实例3.3.1新建一个菜单3.3.1.1编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json格式，详细配置请参照下图3.3.2新建一
5、个路由配置3.3.2.1路由配置文件src/common/router.js，在routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图3.3.3新建一个路由页面3.3.3.1页面元素文件src/routes/HostOperation/HostMonitor.jsimportReact,{PureComponent,Fragment}from'react';import{connect}from'dva';import{Row,Col,Card,Form,Input,Select,Icon,Button,Dropdown,Menu,InputN
6、umber,DatePicker,Modal,message,Badge,Divider,Steps,Radio}from'antd';importStandardTablefrom'../../components/StandardTable';importPageHeaderLayoutfrom'../../layouts/PageHeaderLayout';importstylesfrom'./HostMonitor.less';constFormItem=Form.Item;constgetValue=obj=>Object.keys(obj).map(key=>
7、obj[key]).join(',');//和'hostMonitor'建立连接，进行页面的数据交互@connect(({hostMonitor,loading})=>({hostMonitor,loading:loading.effects['hostMonitor/getMonitorList']}))//创建form对象，固定写法@Form.create()exportdefaultclassHostMonitorextendsPureComponent{state={modalVisible:false,updateM
