antdesignpro开发手册

antdesignpro开发手册

ID:25759968

大小:202.50 KB

页数:17页

时间:2018-11-22

antdesignpro开发手册_第1页
antdesignpro开发手册_第2页
antdesignpro开发手册_第3页
antdesignpro开发手册_第4页
antdesignpro开发手册_第5页
资源描述:

《antdesignpro开发手册》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、WORD格式可编辑AntDesignPro开发手册修订历史记录专业知识整理分享WORD格式可编辑日期版本说明作者目录专业知识整理分享WORD格式可编辑1.前言专业知识整理分享WORD格式可编辑1.1目的让不熟悉AntDesignPro的开发人员快速掌握开发方式1.2概述AntDesignPro是一个前端设计解决方案,由蚂蚁金服体验技术部出品/维护。核心技术组成:²ES2015+JavaScript语言的新标准²React用于构建用户界面的JAVASCRIPT库²dva是基于(redux(状态管理)+react-r

2、outer(路由库)+redux-saga(异步中间件)等)的一层轻量封装²g2一套基于可视化编码的图形语法²antdReact组件1.开发环境2.1Node.js安装配置Node.js安装包及源码下载地址为:https://nodejs.org/en/download/2.2安装方式2.2.1直接clonegit仓库专业知识整理分享WORD格式可编辑gitclone--depth=1https://github.com/ant-design/ant-design-pro.gitmy-projectcdmy-pr

3、oject2.2.2使用集成化的命令行工具ant-design-pro-cli。npminstallant-design-pro-cli-g#安装脚手架mkdirmy-projectcdmy-projectpronew#创建一个新项目2.3目录结构├──mock#本地模拟数据├──public#公共资源│└──favicon.ico#网站图标├──src│├──assets#本地静态资源│├──common#应用公用配置,如导航信息│├──components#业务通用组件│├──e2e#集成测试用例│├──la

4、youts#通用布局│├──models#数据交互│├──routes#业务页面入口和常用模板│├──services#后台接口服务│├──utils#工具库│├──g2.js#可视化图形配置│├──theme.js#主题配置│├──index.ejs#HTML入口模板│├──index.js#应用入口│├──index.less#全局样式│└──router.js#路由入口├──tests#测试工具├──README.md#项目说明└──package.json#项目配置文件专业知识整理分享WORD格式可编辑2

5、.4项目初始化2.4.1安装依赖npminstall2.4.2启动应用npmstart2.4.3打包npmrunbuild该命令会生成*.js、*.css、index.html等静态文件1.开发指导3.1开发规范3.2开发流程示意图专业知识整理分享WORD格式可编辑3.3开发实例3.3.1新建一个菜单3.3.1.1编辑菜单配置文件src/common/menu.js,在menuData里添加菜单配置,数据格式为json格式,详细配置请参照下图专业知识整理分享WORD格式可编辑3.3.2新建一个路由配置3.3.2.

6、1路由配置文件src/common/router.js,在routerConfig里添加路由配置,数据格式为json格式,详细配置请参照下图3.3.3新建一个路由页面3.3.3.1页面元素文件src/routes/HostOperation/HostMonitor.jsimportReact,{PureComponent,Fragment}from'react';import{connect}from'dva';import{Row,Col,Card,Form,Input,Select,Icon,Button,D

7、ropdown,Menu,InputNumber,DatePicker,Modal,message,Badge,Divider,Steps,Radio}from'antd';importStandardTablefrom'../../components/StandardTable';importPageHeaderLayoutfrom'../../layouts/PageHeaderLayout';importstylesfrom'./HostMonitor.less';constFormItem=Form.I

8、tem;constgetValue=obj=>Object.keys(obj).map(key=>obj[key]).join(',');专业知识整理分享WORD格式可编辑//和'hostMonitor'建立连接,进行页面的数据交互@connect(({hostMonitor,loading})=>({hostMonitor,loading:loading.effects

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。