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文件，这极大地提升了性能。

Ant Design的入门使用教程相关推荐

Ant Design pro入门教程
Ant Design pro入门教程最近公司再开项目又要用antd 这次刚好给大家写一个入门安装教程 ( v5 typescript版本 ) 这套模板使用了react框架为基础哦 1. 准备环境 ...
Ant Design Pro入门之简介
Ant Design Pro入门了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案. 效果: 源码地址:htt ...
Ant Design Pro入门教程安装框架
介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安 ...
Ant Design Pro入门
目录一:了解Ant Design Pro 二:快速入门一:了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中 ...
Ant Design Pro入门之部署安装
部署安装下载地址:https://github.com/ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip ...
ant design pro入门踩坑：删除页面文件报错
前提:用ant design pro新增注册页,没有显示在菜单,在项目Page文件夹删除原因:配置路由没有删总结: 手动删除页面需要删1.Page目录下的页面文件 2.src/Page/.umi/ ...
Ant Design Pro入门介绍
官方文档地址:https://pro.ant.design/zh-CN 应用介绍: Ant Design Pro是一个企业级中后台前端/设计解决方案,基于React的中后台管理控制台的脚手架.能帮助我 ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
Ant Design Chart词云图
什么是词云图? 词云图,也叫文字云,是对网络文本中出现频率较高的"关键词"予以视觉上的突出,出现越多,显示的字体越大,越突出,这个关键词也就越重要.让浏览者通过词云图一眼就可以快速 ...

Ant Design的入门使用教程

Ant Design的入门使用教程相关推荐

最新文章

热门文章