Ant Design学习1——概述

2021SC@SDUSC

介绍

Ant Design of React
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品

官方简介

蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

兼容环境

现代浏览器和 IE11（需要 polyfills）。
支持服务端渲染。
Electron

来源：https://ant.design/docs/spec/introduce-cn

设计

Ant Design的设计价值观

我们分成两种不同类型的用户：第一类是用户，第二类叫做设计者。所谓的设计者是创造这些应用性能的人，也就是在座的大多数。
我们将快乐拆成两部分，一部分是快感，一部分是乐趣，基于此，我们衍生出了 Ant Design 四个价值观，设计首先是自然的，其次是确定的，第三，设计是要有意义的，第四，设计是能让用户和产品不断成长的，它是具有生长性的。

Ant Design设计的方法论
ETCG 2.0
Examples 功能范例
Templates 模版
Components 组件
Global Styles 全局样式 指对组件样式的抽象
Guides 交互规则 指人和机如何进行互动交互的过程

作者：林外
链接：https://zhuanlan.zhihu.com/p/269913164
来源：知乎

安装与配置

由于antd是一个React UI组件库，简言之其是由React实现的。

React 是 Facebook 公司推出的一套前端开发框架，是目前全世界最流行的前端框架。

因此在使用antd时一般还需搭建React项目

1.安装Node.js
2.安装create-react-app（可利用其创建react项目）

npm install -g create-react-app 

3.创建项目（先进入目标文件夹，my-project为项目名）

create-react-app my-project

4.引入Ant Design组件库
推荐使用 npm 或 yarn 安装

npm install antd --save
yarn add antd

5.启动（先进入项目目录）

npm run start

后记

我在学习小组中主要负责ant-design组件中的数据录入部分。
这部分共包含17种组件：
AutoComplete 自动完成
Checkbox 多选框
Cascader 级联选择
DatePicker 日期选择框
Form 表单
InputNumber 数字输入框
Input 输入框
Mentions 提及
Rate 评分
Radio 单选框
Switch 开关
Slider 滑动输入条
Select 选择器
TreeSelect 树选择
Transfer 穿梭框
TimePicker 时间选择框
Upload 上传

后面将会进入代码的学习。