antdesign,手把手教你创建Ant Design Pro的React项目
antdesign,手把手教你创建Ant Design Pro的React项目详细介绍
本文目录一览： antdesign是否需要付费
不需要。AntDesign前端框架（包含Axure资源）是免费开源的，可直接拿来用的。AntDesign是一套提炼和应用于企业级后台产品的交互语言和视觉体系。AntDesign源自蚂蚁金服体验技术部的后台产品开发，经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端UI设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
ant-design官方只支持哪个框架
AntDesign官方只支持前端框架。
AntDesign是一个ui框架，和bootstrap一样是ui框架。 里面的组件很完善，开发中后台系统非常方便。 分别基于react、vue、angular框架，各自开发了一套AntDesign的UI框架。
一、通用组件。
1、Button 按钮。
2、Icon 图标。
3、Typography 排版： 这个是文案的排版。
二、布局。
1、Grid 栅格：24 栅格系统，和 bootstrap中的12栅格系统一样的功能。
a、
，给Col 组件之间 添加16像素的间距【原理和bootstrap差不多】。他们之间的间距是以padding撑出来的，所以在 Col 组件上不要使用背景色，最好其它的样式都不要设置吧。
b、两种栅格系统【基础栅格、flex栅格布局】。
2、Layout布局：这个是针对 页面级整体布局。
数据录入看官方文档：
1、AutoComplete自动完成。
2、Checkbox多选框。
3、Cascader级联选择 。
如何评价 ant design
Ant Design 官方介绍： "在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。"在这次开发的项目中，因为数据交互非常频繁，大量的表单、时间选择器、表格、单选多选框，以及各种标识状态的组件，如果光靠手写或者使用 jQuery 插件，其开发的工作量仍然是相当大的，因此，Ant Design "经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。"
同时，React 也是第一次使用，起初对于这种 Html 与 JS 代码混杂的书写格式搞得很不舒服，因为作为一个前端开发者，被"结构与逻辑分离"的思想洗脑太久了，但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。所以在使用了 React 开发一段时间后，越来越感觉到 React 封装组件的高效。而 Ant Design 则封装了一系列高质量的 React 组件，十分适用于在企业级的应用中，框架提供的 api 十分详尽，上手和使用相对简单，值得一提的是， Ant Design 使用 ES6 进行编写，因此使用过程中对 ES6 也是一次学习的机会。
antdesign中record值是上次的
antdesign中record值是上次的是正常现象。根据查询相关公开信息显示，在antdesign中，record的值是一个object，里面存放了这一行数据的内容，回调函数需要用到上一次record值才有意义，antdesign中record值是上次的是正常现象。AntDesign是一个UI设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
ant design（Tabs，Table）配置
1.Tabs标签页默认样式修改，确保先将所有的padding和margin重置。.ant-tabs-bar设置默认的黑灰border-bottom，只需在这里将border都设为0即可。.ant-tabs.ant-tabs-card>.ant-tabs-bar .ant-tabs-tab设置了每一个tab的一些样式，通过debug调试即可。
2.table表格参数配置，可以自定义翻页，分步请求。Table中主要配置解释，column配置主要作用是将列名及列内容做一一对应，dataIndex和dataSource里面的数据值也是一一对应的关系。后面的render除了过滤转换数据同样可以return HTML。recor等价于applysPayed[i]，rowKey给每一行一个唯一key，避免报错。pagination默认为true，可以设置为false，则不会显示翻页。
```
const pagination = dataSourse && dataSourse.length > 10 ? true : false;
<table
rowKey={record => record._id}? ? ? ? ? ?// 避免报错（key)唯一
showHeader={false}? ? ? ? ? ? ? ?// 不展示每一列的名称
?columns={columns}? ? ? ? ? ? ? ?
?dataSource={dataSourse}? ? ? ? ? ? ? ??
?size="small"? ? ? ? ? ? ? ? // tr的高度
pagination= {pagination}? ? ? ? ? ??
/>
```
3.Pagination参数配置，showQuickJumper带自动输入调整翻页，不传则无。其余参数是配合后台做翻页请求。
4.主题样式（颜色）修改目录路径：
/Users/yons/Desktop/task/server-commerce/node_modules/antd/lib/style/themes/default.less:
</table
关于ant design的书籍
Ant Design是前端代码实现方案可不是搭建静态的界面这么简单,还包含动效的解决方案,也提供动效设计风格和原则。
众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。
同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标。
蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系——Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。
『Ant Design设计原则是什么』
针对B端产品反复出现的一些设计体验等问题，Ant Design给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用Ant Design组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。
考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。
①Ant Design设计原则的由来：
可以说Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。
其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。
②Ant Design设计原则的适用范围：
1.我们先说说『Ant Design』的适用范围：
稍微了解Ant Design的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。
2.再说说『Ant Design设计原则』的适用范围：
顾名思义『设计原则』主要是针对设计师在创作页面时依照的标准。虽然『Ant Design的设计原则』是Ant Design系统的一部分，但是前文已经提到。
此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。
为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。
作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。
可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。
③Ant Design设计原则的内容：
十大原则如下：1亲密原则（Proximity）2对齐原则（Alignment)3对比原则（Contrast)4重复原则（Repetition)5直截了当（Make it Direct)。
6简化交互（Keep it Lightweight)7足不出户（Stay on the Page)8提供邀请（ProvideInvitation)9即时反应（React Immediately)10巧用过渡（Use Transition)。
『如何运用Ant Design的设计原则』：
对于一个初级设计师而言，想要了解UI用户体验等知识，学习Ant Design的设计原则算是比较快能上道的，因为Ant Design是吸取了很多前辈的精华，提炼而成的系统。
打个简单的比喻，对于设计师而言Ant Design就是设计师学习『视觉规范』，掌握『设计原则』最好的字典。
接下来我就给大家说说我是如何快速理解Ant Design的这10条设计原则并运用到工作当中。
Ant Design定义了10条设计原则，根据『席克定律』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。
手把手教你创建Ant Design Pro的React项目
介绍
主要是使用?React?和?TypeScript?以及?Ant Design Pro?开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design?是蚂蚁金服的UI框架，发展历程可以说是从?saga-redux -> dva -> umi -> ant design?，说?ant design?是?react?的最佳实践确实是名副其实；其中我最喜欢或者说是?dva?最显著的地方就是修缮了?redux?的不足之处。
搭建
安装 cnpm，yarn，tyarn
```
npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i yarn -gyarn global add tyarn
```
2. ?Ant Design Pro 立足于 umijs 、dva，需要安装 umi
```
yarn global add umi
```
3.? 创建 Ant Design Pro 项目（先创建test文件夹）
```
mkdir test
cd test
yarn create umi （这里选择 ant design pro -> typescript -> simple）tyarn
yarn start
```
+ config
? ? - config.ts? 路由设计
? ? - proxy.ts? 代理（打包后无效）
+ mock? ? ? ? ? 模拟数据
+ src
? ? - assets? ? 放一些静态资源文件（png，svg等）
? ? - component? 主要放全局组件
? ? - layouts? ? 权限、token获取
? ? - models? ? 详细内容见dva，换言之是redux （interface、数据交互）
? ? - pages? ? ? 页面
? ? - serives? ? 请求（get,post）
? ? - utils? ? ? 放一些公用方法
/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */
举个栗子（dva）
TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化
/**? * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/
现在你需要创建一个?src/services/home.ts?去对接后台的接口。
import request from '@/utils/request'// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:number;pageSize:number;}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:'GET',params:{// 填写你需要传给后端的字段...payload,}/**? ? ? ? * 如果是 POST 请求，请将 params 修改成 data? ? ? ? **/})}
接下来，你需要创建一个?src/models/home.ts?去调用上面那个接口 （详细教程看?dva），我这是临时起意边想边写的（俗称瞎编乱造）。
import{queryGetMyHomeData}from'@/services/home'import{Effect,Reducer}from'umi';exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:number;title:string;createdDate:number;brief:string;}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:number;data:Array
;}exportinterfaceHomeModelType{namespace:string;// 说好听点叫做 "命名空间"state:HomeState;// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,};reducers:{setData:Reducer
,setPage:Reducer
,};}constHomeModel={namespace:'home',state:{currentPage:1,data:[],},effects:{*getData({payload},{call,put}){constres=yieldcall(queryGetMyHomeData,payload);// payload 要对应 queryGetMyHomeData 的形参，否则另当别论constarr=Array.isArray(res.data)?res.data:[];// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:'setData',payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:'setPage',payload});// yield take( 'setPage/@@end' );? ? // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:'getData',payload});},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel;
让?src/pages/home/index.tsx?去?connect?HomeModel
importReact,{useEffect}from'react';import{connect,Dispatch}from'umi';import{HomeState}from'@/models/home'interfaceHomeProps{dispatch:Dispatch;home:HomeState;}constHome:React.FC
=(props)=>{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props;// 获取数据，或者说是初始化数据useEffect(()=>{dispatch({type:'home/getData',payload:{currentPage,pageSize:8,}})},[]);// 页码改变事件functionpageChange(page){/**? ? ? ? * page的修改是两个操作? ? ? ? * 1. 修改 page? ? ? ? * 2. 获取数据? ? ? ? * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题? ? ? ? **/dispatch({type:'home/changePage',payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了);}exportdefaultconnect(home:HomeState=>home)(Home);
还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。
有关于 Dva 对 Redux 的修改，见下图
antdesign适合开发小程序吗
适合，但看你选择。AntDesign是一个致力于提升用户和设计者使用体验的设计平台，有小程序开发相关途径。AntDesign更加适合管理平台的开发。
如何修改ant design部分组件的样式
一、去除Antd的Button组件两个汉字中间的空格
二、去掉input聚焦时的蓝色边框
三、去掉点击button时的动画
四、替换搜索框的icon
五、修改树形控件选中项的背景色
六、解决react里input输入时显示[object Object]
七、ant design的气泡卡片组件Popover的弹窗里设置输入框
从content属性入手，content属性值设置为包含input的组件（该组件里不要使用Input组件，直接使用input，否则崩溃）
八、设置input的宽度随输入内容长度的变化而变化：
设置一个兄弟节点span,span显示的内容绑定input的value,通过定位让span隐藏在input下
九、如何让antd的Modal组件的确认和取消不显示
十、如何改变Icon的大小和颜色
antdesign表单多张图片上传校验不通过
当我们使用Ant Design表单进行多张图片上传时，需要对上传的图片进行校验，以确保上传的图片符合我们的要求。但是有时候，当我们选择的图片数量超过了我们所设定的限制时，校验就会失败，导致无法提交表单。
为了解决这个问题，我们可以在代码中设置一个最大上传图片数量的限制，然后在上传前对上传的图片数量进行检查，如果超过了限制，就不允许上传。另外，还可以在前端代码中添加提示信息，让用户知道上传图片数量的限制和校验失败的原因。
总之，在使用Ant Design表单进行多张图片上传时，我们需要对上传的图片进行校验，以确保上传的图片数量符合我们的要求，并且在代码中添加适当的限制和提示信息，以提高用户体验和表单的提交成功率。