最新AntDesignPro开发手册.docxVIP

PAGE PAGE # AntDesignPro 开发手册 修订历史记录 日期 版本 说明 作者 目录 / 、/?― 前言 1.1目的 让不熟悉Ant Design Pro 的开发人员快速掌握开发方式 1.2概述 An t Desig n Pro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品 /维护 核心技术组成： ES2015+ JavaScript 语言的新标准 React用于构建用户界面的 JAVASCRIPT库 （异dva 是基于（redux （状态管理） + react-router （路由库） + redux-saga （异 步中间件）等）的一层轻量封装 g2 一套基于可视化编码的图形语法 antd React 组件 开发环境 Node.js 安装配置 Node.js安装包及源码下载地址为： /download/ 2.2安装方式 直接 clone git 仓库 git clone --depth=1 -desig n/an t-desig n-pro.git my-project cd my-project 2.2.2使用集成化的命令行工具 ant-design-pro-cli npm in stall an t-desig n-pro-cli -g # 安装脚手架 mkdir my-project cd my-project pro new #创建一个新项目 2.3目录结构 I ockI I ock I ublic 1 avicon.ico I rc I ssets I ommon I omponents I 2e I ayouts I odels I outes I ervices I tils I——2.js I heme.js I ndex.ejs I ndex.js I ndex .l ess 1 outer.js I ests I EADME.md 1 ackage.json #公共资源 #网站图标 #本地静态资源 #应用公用配置，如导航信息 #业务通用组件 #集成测试用例 #通用布局 #数据交互 #业务页面入口和常用模板 #后台接口服务 #工具库 #可视化图形配置 #主题配置 # HTML 入口模板 #应用入口 #全局样式 #路由入口 #测试工具 #项目说明 #项目配置文件 2.4项目初始化 安装依赖 npm install 启动应用 npm start 打包 npm run build 该命令会生成 *.js、 *.css、 index.html 等静态文件 开发指导 开发规范 开发流程示意图 2018.03Ant Design P「o开发流程示意图 2018.03 开始 菜单（maujw） 模拟数風mxk） 路由(router.js) 贡面(routes) 4 数病摸^（mod 土） 4、 请求(wervie) 1 L 5J 7 6 1 备注： 真实数摇?rvw） *功能开发时推荐便用［模拟数据］模式 *功能联调时推荐使用［真实数据］模式 3.3开发实例 3.3.1新建一个菜单 81 PAGE 81 PAGE # 331.1编辑菜单配置文件src/common/menu.js ，在menuData 里添加菜单配置，数据格式为json 格式，详细配置请参照下图 J5 menujs const menuData - [{ name: TR菜单中文容称如：主机运维J 注on:、字体團拆容称〔从團标列表中选择）如：匕 path: 单路径 注意这块命名■使用英文或者字母，不要晚用中文”阜量拿菜单功能命害JO： hostOperation） children: [{ name: ?二级来单中文名琲 如主监控S icon;字体图标名称C从團标列表中选援〉J path:二级菜单脸径（注意这块命名使用英文或者字母，不晏使用中文■尽虽莹菜单功能命名如；nmnitor） cbildrtn: [{ /三级三虫 曲水：?三级菜单中文容称如：主机监控J icon： 字体團标名称（从團标列表中选择）\ path:-三级菜单蹌径〔注彦遠块弗容使用英文或者字母，不萎便用中文■尽蚩拿菜单功能命名如；hottMoniton） \ }]* }]， Hi IconFont 图标 部分囲新截囲红色区域为ienli性的取值范围「藍色区城也可以做取值范围，注憲要去掉?.isn-? stepforward stepbackward forward bandcward caretright caretleft caretdown | ■icon- ■icon- .icon-forward .icon- .icon-caretright .icon-caretieft .icon-caretdown stepfor