antdesignpro开发手册新.doc

AntDesignPro开发手册 修订历史记录 日期 版本 说明 作者 目录 前言 1.1目的 让不熟悉Ant Design Pro 的开发人员快速掌握开发方式 1.2概述 Ant Design Pro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。 核心技术组成： ES2015+ JavaScript语言的新标准 React 用于构建用户界面的 JAVASCRIPT 库 dva 是基于(redux（状态管理） + react-router（路由库） + redux-saga（异步中间件） 等)的一层轻量封装 g2 一套基于可视化编码的图形语法 antd React组件 开发环境 2.1 Node.js 安装配置 Node.js安装包及源码下载地址为： HYPERLINK /en/download/ /en/download/ 2.2安装方式 2.2.1直接 clone git 仓库 git clone --depth=1 /ant-design/ant-design-pro.git my-project cd my-project 2.2.2使用集成化的命令行工具 ant-design-pro-cli。 npm install ant-design-pro-cli -g #安装脚手架 mkdir my-project cd my-project pro new # 创建一个新项目 2.3 目录结构 ├── mock # 本地模拟数据 ├── public # 公共资源 │ └── favicon.ico # 网站图标 ├── src │ ├── assets # 本地静态资源 │ ├── common # 应用公用配置，如导航信息 │ ├── components # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # 数据交互 │ ├── routes # 业务页面入口和常用模板 │ ├── services # 后台接口服务 │ ├── utils # 工具库 │ ├── g2.js # 可视化图形配置 │ ├── theme.js # 主题配置 │ ├── index.ejs # HTML 入口模板 │ ├── index.js # 应用入口 │ ├── index.less # 全局样式 │ └── router.js # 路由入口 ├── tests # 测试工具 ├── README.md # 项目说明 └── package.json # 项目配置文件 2.4 项目初始化 2.4.1安装依赖 npm install 2.4.2启动应用 npm start 2.4.3打包 npm run build 该命令会生成 *.js、*.css、index.html 等静态文件 开发指导 3.1开发规范 3.2 开发流程示意图 3.3 开发实例 3.3.1 新建一个菜单 编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json格式，详细配置请参照下图 3.3.2 新建一个路由配置 路由配置文件src/common/router.js，在routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图 3.3.3 新建一个路由页面 页面元素文件 src/routes/HostOperation/HostMonitor.js import React, { PureComponent, Fragment } from react; import { connect } from dva; import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message, Badge, Divider, Steps, Radio } from antd; import StandardTable from ../../components/StandardTable; import PageHeaderLayout f