之前学习教程的案例资料不全,还找寻找合适的案例进行操练。先继续学习一些其他内容
0、流行的开源的UI组件库
material-ui(国外)
在官网上查看文档,github上有
官网:material-ui链接
github:代码
本篇博客不做讲解
ant-design(国内蚂蚁金服)
官网:ant-design
1、ant-design基本使用
组件库的使用基本是相通了,知道如何引入、使用、修改,便可以基本使用这个组件库。
1.1 安装
我安装的是当前最新版本>5,很多配置都比之前的版本简化了,对新手友好。
安装:
npm install antd --save
大家如果有下载失败的可以查看一下npm下载源,可以更换成淘宝或者清华镜像。如果不行,搜索一下错误提示,我在下载过程中出现了证书过期的错误,关闭SSL就下载成功了。
//查看地址
npm config get registry
//修改成淘宝镜像地址
npm config set registry https://registry.npm.taobao.org/
1.2 使用
以图标为例,其他举一反三
- 引入
按需引入,使用哪个组件引入哪个组件。
import {PhoneOutlined} from '@ant-design/icons';
- 使用
- 扩展
使用和掌握一个组件的使用,还得看一些参数的使用。一般按钮等组件要结合事件结合起来,看官网文档模仿学习。