安装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>
)
}
}
配置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",
})
);
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>
)
}
}
如果: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