文档介绍：AntDesignPro开发手册
修订历史记录
日期
版本
说明
作者
目录
前言
让不熟悉Ant Design Pro 的开发人员快速掌握开发方式
Ant Design Pro是一个前端设计解决方案,由蚂蚁金服体验技术部出品/维护。
核心技术组成:
ES2015+ JavaScript语言的新标准
React 用于构建用户界面的 JAVASCRIPT 库
dva 是基于(redux(状态管理) + react-router(路由库) + redux-saga(异步中间件) 等)的一层轻量封装
g2 一套基于可视化编码的图形语法
antd React组件
开发环境
安装配置
:https:///en/download/
clone git 仓库
git clone --depth=1 https:///ant-design/ant-design- my-project
cd my-project
ant-design-pro-cli。
npm install ant-design-pro-cli -g #安装脚手架
mkdir my-project
cd my-project
pro new # 创建一个新项目
目录结构
├── mock # 本地模拟数据
├── public # 公共资源
│└── # 网站图标
├── src
│├── assets # 本地静态资源
│├── common # 应用公用配置,如导航信息
│├── components # 业务通用组件
│├── e2e # 集成测试用例
│├── layouts # 通用布局
│├── models # 数据交互
│├── routes # 业务页面入口和常用模板
│├── services # 后台接口服务
│├── utils # 工具库
│├── # 可视化图形配置
│├── # 主题配置
│├── # HTML 入口模板
│├── # 应用入口
│├── # 全局样式
│└── # 路由入口
├── tests # 测试工具
├── # 项目说明
└── # 项目配置文件
项目初始化
npm install
npm start
npm run build
该命令会生成*.js、*.css、 等静态文件
开发指导
开发流程示意图
开发实例
新建一个菜单
,在menuData里添加菜单配置,数据格式为json格式,详细配置请参照下图
新建一个路由配置
,在routerConfig里添加路由配置,数据格式为json格式,详细配置请参照下图
新建一个路由页面
src/routes/HostOperation/
import React, { ponent, 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 from '../../layouts/PageHeaderLayout';
import styles from './';
const FormItem = ;
const getValue = obj => (obj).map(key => obj[key]