AntDesignPro开发手册.docx
《AntDesignPro开发手册.docx》由会员分享，可在线阅读，更多相关《AntDesignPro开发手册.docx（6页珍藏版）》请在冰豆网上搜索。
AntDesignPro开发手册
AntDesignPro开发手册
修订历史记录
日期
版本
说明
作者
1.
、八—
前言
目的
让不熟悉AntDesignPro的开发人员快速掌握开发方式
概述
AntDesignPro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护
核心技术组成：
ES2015+JavaScript语言的新标准
React用于构建用户界面的JAVASCRIPT库
（异
dva是基于（redux（状态管理）+react-router（路由库）+redux-saga
步中间件）等）的一层轻量封装
g2一套基于可视化编码的图形语法
antdReact组件
2.开发环境
安装配置
安装包及源码下载地址为：
安装方式
直接clonegit仓库
gitclone--depth=1ant-design/my-project
cdmy-project
使用集成化的命令行工具ant-design-pro-cli
安装脚手架
npminstallant-design-pro-cli-g#mkdirmy-project
cdmy-project
pronew#创建一个新项目
目录结构
Iock#本地模拟数据
Iublic#公共资源
项目初始化
安装依赖
npminstall
启动应用
npmstart
1#网站图标
打包
npmrunbuild
该命令会生成*.js、*.css、等静态文件
3.开发指导
开发规范
开发流程示意图
开发实例
新建一个菜单
编辑菜单配置文件src/common/，在menuData里添加菜单配置，数据格式为json格式，详细配
置请参照下图
亡阵fihfhuDatam|[{
G"眉■一级弟耳U申文名科如：
王机远维J
片讪：
■-販聚单跻從（汪恿逹块询自廈用龙文成背字母，不莫便年中我*艮重車袒卑町就話呂艮口：
'>
tuhLldr^n:
[{"二^菜单
曲盹：
.二级菜单中文答称dh监拧’・
Uon:
•字体因标苦I■”从團标凤去中选择1・.
pathi■二级:
菜曲逊型{江意遠块命芒俠同英文或普亨耳，不烫快用中丈々里蕴叢亜功铳陆名如tniuMWr）
12children:
[{
13name:
-三级菜单叩文g称如t王机席控S
!
■isn：
•字体團爭名称]从国标列表巾选舞〉’，
Mth厂三吗畫葷时泾怕龜立块晶苦博币费丸或誉亨曰*不參便帀巾叽居蚤電茱卑巾號話运&□>hos^Nonlwr）\
匾}]•
17）】・
ia}]；
IconFont图扌示部分建标戯图红色区誠対亡口口庫性的取值花圉「蓝色盘域也可以曲取晋西围「‘工禎去掉叮sn-’1
HK»«»V▼
stepforivard
stepbaefcward
ftyvrard
t>anclcward
caretrigtit
carettet
caretdowi
■icon-
.icon-
.jeon•forward
.iccn-caretright
.icon-caretieft
.con-canetdown
st?
pforward
srephacicwari
banckward
新建一个路由配置
路由配置文件src/common/，在routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图
isrnulerjS
X
rnnstgptkoutprUata=（trpp）=>彳
72
constrouterConfiR={
7J
"/bo^Wperation/nnitor^1h^sthtonitor':
{
/Ji
COit^x^n^nT:
dynAfniiUr>n卩p^r]押卩*["houTMordTrirh
（）■>（'□□/rx）iJTP$>Hdstope>reTlofl/HostMonlTrtr,J^'））t
/j审〒牛Fjlrt*■p从a1£uT內r咎电S'Jn—i且文T4*zifjhK>rli
丿F二丄田厶厚丁4厲惜姿HI/J士木羊埃思£_昭曲田』大沪-
77
壬$'$w+f*"injryn鼻■—ifk-nL_i*nn厂n—■*■rtntir-i*rtyi.n'.""■*盘*；毘口r~s
JfflilUZ>LVJpt:
1dL_LiJrlfIILll-LLU1/1Ua-IL^LJI_LLur|三史』严|_|||
enu.je里的闵廿闍釀对应上
78
//[PhostMonitore]|代表当前菜单项拥有坯,hostMonitor*
Uditm丄Fjf妒井那艮
7Q
f丁
ffimport（F八/routes/HostOpepatlor/HostMoniltQr*js
，卅奁当前套里顶对应的市面地坊
se
}
新建一个路由页面
页面元素文件src/routes/HostOperation/
data:
新建一个模拟请求数据返回
新建service文件：
新建一个真实请求数据返回
新建service文件:
线资源
官方文档：
AngDesignPro代码地址
AngDesignPro文档
AngDesignPro在线问题讨论
AngDesign在线文档
国内镜像站点
在线预览：
需要完善的功能
用户登录信息动态菜单和路由
升级会员 