資源描述：
《antdesignpro開發(fā)手冊范文》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、WORD完美格式AntDesignPro開發(fā)手冊修訂歷史記錄..整理分享..WORD完美格式日期版本說明作者目錄..整理分享..WORD完美格式1.前言..整理分享..WORD完美格式1.1目的讓不熟悉AntDesignPro的開發(fā)人員快速掌握開發(fā)方式1.2概述AntDesignPro是一個前端設(shè)計解決方案，由螞蟻金服體驗技術(shù)部出品/維護。核心技術(shù)組成：2ES2015+JavaScript語言的新標(biāo)準(zhǔn)2React用于構(gòu)建用戶界面的JAVASCRIPT庫2dva是基于(redux（狀態(tài)管理）+react-router（路由庫）+
2、redux-saga（異步中間件）等)的一層輕量封裝2g2一套基于可視化編碼的圖形語法2antdReact組件1.開發(fā)環(huán)境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-project2.2.2使用集成化的命令行
3、工具ant-design-pro-cli。npminstallant-design-pro-cli-g#安裝腳手架mkdirmy-projectcdmy-projectpronew#創(chuàng)建一個新項目2.3目錄結(jié)構(gòu)├──mock#本地模擬數(shù)據(jù)├──public#公共資源│└──favicon.ico#網(wǎng)站圖標(biāo)├──src│├──assets#本地靜態(tài)資源│├──common#應(yīng)用公用配置，如導(dǎo)航信息│├──components#業(yè)務(wù)通用組件│├──e2e#集成測試用例│├──layouts#通用布局│├──models#數(shù)據(jù)交互│
4、├──routes#業(yè)務(wù)頁面入口和常用模板│├──services#后臺接口服務(wù)│├──utils#工具庫│├──g2.js#可視化圖形配置│├──theme.js#主題配置│├──index.ejs#HTML入口模板│├──index.js#應(yīng)用入口│├──index.less#全局樣式│└──router.js#路由入口├──tests#測試工具├──README.md#項目說明└──package.json#項目配置文件..整理分享..WORD完美格式2.4項目初始化2.4.1安裝依賴npminstall2.4.2啟動應(yīng)
5、用npmstart2.4.3打包npmrunbuild該命令會生成*.js、*.css、index.html等靜態(tài)文件1.開發(fā)指導(dǎo)3.1開發(fā)規(guī)范3.2開發(fā)流程示意圖..整理分享..WORD完美格式3.3開發(fā)實例3.3.1新建一個菜單3.3.1.1編輯菜單配置文件src/common/menu.js，在menuData里添加菜單配置，數(shù)據(jù)格式為json格式，詳細配置請參照下圖..整理分享..WORD完美格式3.3.2新建一個路由配置3.3.2.1路由配置文件src/common/router.js，在routerConfig里添
6、加路由配置，數(shù)據(jù)格式為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,Dropdown,Menu,InputNumber,DatePicker,Modal,message,
7、Badge,Divider,Steps,Radio}from'antd';importStandardTablefrom'../../components/StandardTable';importPageHeaderLayoutfrom'../../layouts/PageHeaderLayout';importstylesfrom'./HostMonitor.less';constFormItem=Form.Item;constgetValue=obj=>Object.keys(obj).map(key=>obj[key]
8、).join(',');..整理分享..WORD完美格式//和'hostMonitor'建立連接，進行頁面的數(shù)據(jù)交互@connect(({hostMonitor,loading})=>({hostMonitor,loading:loading.effects['hostMon
