18 React——Ant Design的使用

18 React——Ant Design的使用

之前的文章都在介绍React的入门,我们从一个react项目的创建到组件的新建,再到路由的配置,最后的路由模块化。我们可以创建的都是一些简单的react页面,它的样式我们最然可以写css文件来修饰,但是工作量有点大。

接下来我们讲解react搭配使用的一套组件库——Ant Design。它类似于Bootstrap,里面提供了丰富的组件,我们只需配置环境后即可按需引用它们来布局和开发,提高效率。下面看具体操作:

1 环境配置

我们在新建的react项目中使用Ant Design,需要安装它。在react项目文件中我们打开命令行,输入“npm install antd --save”来安装,如图:

www.zeeklog.com  - 18 React——Ant Design的使用

2 安装完成后我们在项目的index.css文件中引入它的样式文件,在此文件头部加入如下信息即可完成引入“@import '~antd/dist/antd.css';”:

www.zeeklog.com  - 18 React——Ant Design的使用

3 接下来我们在需要组件的地方粘贴官网上()的控件代码,然后引入相应的组件包即可,如下:

www.zeeklog.com  - 18 React——Ant Design的使用
www.zeeklog.com  - 18 React——Ant Design的使用

4 如果我们不满意控件的大小和颜色,我们可以自己定义它的css样式。以上就是Ant Design的简单使用过程。