AntDesignPro开发手册.docx

1、AntDesignPro开发手册An tDesig nPro 开发手册修订历史记录日期版本说明作者1.、八前言目的让不熟悉 Ant Design Pro 的开发人员快速掌握开发方式概述An t Desig n Pro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品 /维护核心技术组成：ES2015+ JavaScript 语言的新标准React用于构建用户界面的 JAVASCRIPT库（异dva 是基于（redux （状态管理） + react-router （路由库） + redux-saga步中间件）等）的一层轻量封装g2 一套基于可视化编码的图形语法antd React 组件2.开发环

2、境安装配置安装包及源码下载地址为：安装方式直接clone git 仓库git clone -depth=1 an t-desig n/ my-projectcd my-project使用集成化的命令行工具 an t-desig n-pro-cli安装脚手架npm install ant-design-pro-cli -g # mkdir my-projectcd my-projectpro new # 创建一个新项目目录结构I ock #本地模拟数据I ublic #公共资源项目初始化安装依赖npm install启动应用npm start1 #网站图标打包npm run build该命令会生

3、成*.js、*.css、等静态文件3.开发指导开发规范开发流程示意图开发实例新建一个菜单编辑菜单配置文件src/common/，在menuData里添加菜单配置，数据格式为json格式，详细配置请参照下图亡阵 f ihfh uDat a m | G眉一级弟耳U申文名科如：王机远维J片讪：-販聚单跻從（汪恿逹块询自廈用龙文成背字母，不莫便年中我*艮重車袒卑町就話呂艮口： t uhLldrn: 二菜单曲盹：.二级菜单中文答称dh监拧Uon: 字体因标苦I”从團标凤去中选择1.pathi 二级:菜曲逊型江意遠块命芒俠同英文或普亨耳，不烫快用中丈 里蕴叢亜功铳陆名 如t niuMWr）12childr

4、en: 13name:-三级菜单叩文g称如t王机席控S! isn： 字体團爭名称从国标列表巾选舞，Mth厂三吗畫葷时泾 怕龜立块晶苦博币费丸或誉亨曰*不參便帀巾叽居蚤電茱卑巾號話运& hosNonlwr） 匾 17 ）】ia ；Icon Font 图扌示 部分建标戯图红色区誠対亡口口庫性的取值花圉蓝色盘域也可以曲取晋西围工禎去掉叮sn-1H K V stepforivardstepbaefcwardftyvrardtanclcwardcaretrigtitcarettetcaretdowiicon-.icon-.jeon forward.iccn-caretright.icon-caretie

5、ft.con-canetdownst?pforwardsrephacicwaribanckward新建一个路由配置路由配置文件src/common/，在routerConfig 里添加路由配置，数据格式为json格式，详细配置 请参照下图is rnulerjSXrnnst gpt kout prUata = (trpp)= 彳72const routerConfiR = 7J/ boWperat ion/nnitor1 hsthtonitor: / JiCOitxnnT: dynAfnii Urn卩pr押卩* houTMordTrir h() ( /rx)iJTP$HdstopereT lof

6、l/HostMonlTrtr, J) )t/ j 审牛 Fjlrt* p 从 a 1 uT 內r 咎 电S Jn i 且文T 4* z ifj h K r li丿F二丄田厶厚丁4厲惜姿HI/J 士木羊埃思_昭曲田大沪-77壬 $ $ w + f* in jry n 鼻 i f k-nL _i*nn 厂 n * rtnt ir-i * r t yi. n . * 盘*；毘 口 rsJ f f lilUZ LVJpt: 1 d L_LiJrlf II L ll-L LU 1 / 1 Ua-ILLJI _L Lur | 三 史严|_| |enu. j e里的闵廿闍釀对应上78/ P host Mon

7、itor e| 代表当前菜单项拥有坯,hostMonitor*Uditm丄Fjf妒井那艮7Qf 丁ff import (F 八 /routes/HostOpepatlor/HostMoniltQr * j s，卅奁当前套里顶对应的市面地坊se新建一个路由页面页面元素文件 src/routes/HostOperati on/data: 新建一个模拟请求数据返回新建service 文件：新建一个真实请求数据返回新建service 文件:线资源官方文档：AngDesignPro代码地址AngDesignPro 文档AngDesignPro在线问题讨论AngDesign在线文档国内镜像站点在线预览：需要完善的功能用户登录信息 动态菜单和路由