Antd组件库使用方法

Posted 2021-03-16 dmyxs

零、介绍：

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

1 /* package.json */
2 "scripts": {
3 -   "start": "react-scripts start",//原来
4 +   "start": "react-app-rewired start",//修改
5 -   "build": "react-scripts build",
6 +   "build": "react-app-rewired build",
7 -   "test": "react-scripts test",
8 +   "test": "react-app-rewired test",
9 }

 

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

 

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

1 const { override, fixBabelImports } = require(‘customize-cra‘);
2 
3 module.exports = override(
4   fixBabelImports(‘import‘, {
5     libraryName: ‘antd‘,
6     libraryDirectory: ‘es‘,
7     style: ‘css‘,
8   }),
9 );

 

四、使用

 1 import React, { Component } from ‘react‘
 2 import { Button } from ‘antd‘; //单独引用
 3 
 4 export default class About extends Component {
 5   render() {
 6     return (
 7       <div>
 8         关于
 9         {/* 使用按钮组件 */}
10         <Button type="primary">Primary</Button>
11       </div>
12     )
13   }
14 }

 

五、页面效果