react引入antd组件示例步骤

安装antd
sudo npm install antd --save

import React, { Component } from 'react'
import Button from 'antd/lib/button'
import 'antd/dist/antd.css'

export default class App1 extends Component {
  render() {
    return (
      <div>
        <h1>演示antd组件库的使用</h1>
        <Button type='primary'>按钮组件使用</Button>
      </div>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置antd加载需要的库
sudo yarn add react-app-rewired customize-cra

修改package.json
“scripts”: {
“start”: “react-app-rewired start”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test”,
“eject”: “react-scripts eject”
},

项目跟目录创建：config-overrides.js

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

sudo yarn add babel-plugin-import

使用：

import React, { Component } from 'react'
import Button from 'antd/lib/button'
// import 'antd/dist/antd.css'

import {Button} from 'antd'

export default class App1 extends Component {
  render() {
    return (
      <div>
        <h1>演示antd组件库的的使用 </h1>
        <Button type='primary'>按钮组件使用</Button>
      </div>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果：info There appears to be trouble with your network connection. Retrying…

npm config set registry https://registry.npm.taobao.org
然后删除：yarn.lock
重新执行：sudo yarn add babel-plugin-import