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

 

五、頁面效果