Ant Design的入门使用教程

一、Ant Design 介绍
1.1 背景
如果经常浏览各种网站,就会发现不管网页的主题是什么,通常都会出现一些重复的构件,比如:日历、表格、表单、菜单、卡片、导航栏等。
这些构件的功能和外观都很类似,只是在一些细节的地方,根据需要做了定制。它们就叫做组件,一张完整的网页,可以看做是不同功能的组件的集合。
又由于之前浏览器大战的残留问题,导致即时做出了一个组件,但是其不能很好的适用所有浏览器。
2014年,React 框架发布,为组件提出了一套可行的解决方案。从此,可以用于实际开发的组件库才变成了现实。

1.2 AntDesign
Ant Design 就是基于 React 实现的一套组件库。它是由蚂蚁金服体验技术部开发的,最早是在2015年发布的,到现在已经发布了三个大版本,目前一共封装了50多个组件。它在国内得到广泛使用,可能是使用量最大的 React 组件库,在国际上也有一定的知名度。
它的功能完备,使用简单。你会发现使用 Ant Design,可以很快做出一张网页,真的就像搭积木一样。
值得一提的是,Ant Design 不仅包括组件,也包括一套设计规范和理念。组件库可以看做是 Ant Design 设计规范的 React 实现。Ant Design 想要带给用户,不仅仅是功能,还包括漂亮的外观和良好的体验。

1.3 React 介绍
Ant Design 是基于 React 开发的。要使用 Ant Design,必须学会 React。
React 是 Facebook 公司推出的一套前端开发框架,是目前全世界最流行的前端框架。

React 本身的 API 并不多,是一个较为简单的框架。但是,要用好它,必须使用其他的配套工具,所以人们常说学习 React 并不是学习一个框架,而是学习一整套 React 技术栈。

1.4 umi 介绍
umijs网址

React 组件使用的是 JSX 语法和很多新的 ES6 语法。另外,不同的组件脚本必须打包在一起,浏览器才能加载。
因此,React 应用有一个构建过程,将源码编译为生产环境代码。这个步骤对于新手来说是比较麻烦的,因为有很多配置的细节,而且包括很多重复的环节,每个项目都必须做一次,也是很烦人的。

因此,一个工具 umi,封装了编译步骤,包括了很多开发时的有用工具。只要你写好 React 代码,接下来 umi 就会把它处理为生产代码。

umi 也是蚂蚁金服体验技术部推出的工具。本课程采用 umi 和 Ant Design 配套使用。


Ant Design 是蚂蚁金服开源的,一款十分好用的UI组件库,基于react(官方实现),目前也支持vue,angular等框架
基于React官网:https://ant.design/index-cn
基于 Vue官网:https://www.antdv.com/docs/vue/introduce-cn/
基于Angular官网:https://ng.ant.design/docs/introduce/zh

antd的组件十分丰富,齐全,样式也很新颖,而且使用也十分方便 。

就像bootstrap框架一样,我们在使用的时候,只需要引入js文件,以及css文件就可以使用了。不过与之不同的是:在antd中,我们使用的原生标签都被封装为一个个的组件,这样我们在使用时可以按需引入。所以我们不用一下子引入整个js文件,这极大地提升了性能。

猜你喜欢

转载自blog.csdn.net/efew212efe/article/details/125445009
今日推荐