Antd组件库使用方法

零、介绍：

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>
     )
   }
 }

五、页面效果