零、介绍:

Ant design,是阿里巴巴的蚂蚁金服公司设计的一套适应用于web端和移动端网页的Ui组件库,组件好看,非常适合React框架使用。

官网:https://ant.design/index-cn

一、第一步:安装包

引包:cnpm i -S antd

二、全局引用、其实都不这么用,因为需要引用的文件太大,影响性能、所以这里忽略。

三、按需加载、想用什么组件就引入什么组件

1.安装依赖:两个包

cnpm i -D react-app-rewired customize-cra

2.把pakage.json文件的scripts的react-scripts替换成react-app-rewired

 /* package.json */
"scripts": {
- "start": "react-scripts start",//原来
+ "start": "react-app-rewired start",//修改
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}

3.安装插件  cnpm i -S babel-plugin-import

4.在项目根目录创建一个 config-overrides.js 用于修改默认配置。

 const { override, fixBabelImports } = require('customize-cra');

 module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);

四、使用

 import React, { Component } from 'react'
import { Button } from 'antd'; //单独引用 export default class About extends Component {
render() {
return (
<div>
关于
{/* 使用按钮组件 */}
<Button type="primary">Primary</Button>
</div>
)
}
}

五、页面效果

Antd组件库使用方法的更多相关文章

  1. Antd组件库,利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  2. antd组件库BackTop组件设置动态背景图片的问题

    有这么一个需求,利用antd组件库中的BackTop组件的逻辑,但是自己写样式. 我的目标样式是:有两张图片,一张是normal(正常情况),一张是hover(悬停情况). 这时候就要用到css的动画 ...

  3. react项目中antd组件库的使用需要注意的问题

    antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...

  4. ElementUI组件库常见方法及问题汇总(持续更新)

    本文主要介绍在使用ElementUI组件库的时候,常遇见的问题及使用到的方法,汇总记录便于查找. 1.表单 阻止表单的默认提交 <!-- @submit.native.prevent --> ...

  5. 从零搭建react+ts组件库(封装antd)

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

  6. [转] 组件库按需加载 借助babel-plugin-import实现

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...

  7. 组件库按需加载 借助babel-plugin-import实现

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...

  8. react 项目实战(十)引入AntDesign组件库

    本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm ...

  9. 如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

随机推荐

  1. css实现简单的页面自适应宽度

    1.css样式.lgn{ width:500px; height:20px;}.item_left_yd{ float: left; display: inline-block; width:240p ...

  2. mybatis PageHelper分页插件 和 LRU算法缓存读取数据

    分页: PageHelper的优点是,分页和Mapper.xml完全解耦.实现方式是以插件的形式,对Mybatis执行的流程进行了强化,添加了总数count和limit查询.属于物理分页. 一.首先注 ...

  3. Python--day63---出版社增删查改开发流程回顾

    1,第一步:对应url 2,第二步:views.py 3,第三步:views.py中的函数中利用ORM去数据库中操纵数据 4,第四步:Django模板语言实现字符串替换 5,第五步:取出publish ...

  4. java 集合类 & 容器

    为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就要对对象进行存储,集合就是存储对象最常用的一种方式. 数组和集合类同是容器,有何不同? 数组虽然也可以存储 ...

  5. P1091 剧院广场

    题目描述 柏林首都的剧院广场呈长方形,面积为 \(n \times m\) 平方米.在这座城市的周年纪念日之际,人们决定用方形花岗岩石板铺设广场.每块石板的大小都是 \(a \times a\) . ...

  6. P1016 高精度除法

    题目描述 给你两个很大的正整数A和B,你需要计算A除以B的商和余数. 输入格式 输入一行包含两个正整数A和B,以一个空格分隔(A和B的位数都不超过 \(10^5\)) 输出格式 输出一行包含两个整数, ...

  7. linux进程唤醒的细节

    我们已展现的唤醒进程的样子比内核中真正发生的要简单. 当进程被唤醒时产生的真正动 作是被位于等待队列入口项的一个函数控制的. 缺省的唤醒函数[22]22设置进程为可运行的 状态, 并且可能地进行一个上 ...

  8. H3C设置时间--用户视图下

    <H3C>clock datetime ?   TIME  Specify the time (HH:MM:SS) <H3C>clock datetime 19:29:00 ? ...

  9. 2018-2-13-win10-uwp-从Type使用构造

    title author date CreateTime categories win10 uwp 从Type使用构造 lindexi 2018-2-13 17:23:3 +0800 2018-2-1 ...

  10. Java 学习笔记(10)——容器

    之前学习了java中从语法到常用类的部分.在编程中有这样一类需求,就是要保存批量的相同数据类型.针对这种需求一般都是使用容器来存储.之前说过Java中的数组,但是数组不能改变长度.Java中提供了另一 ...