1.首先我们需要新建一个项目 create-react-app my_app
2.在项目目录通过cmd安装下载引入 antd
Ant Design官网
1 )通过npm安装
npm install react-router-dom
2 )通过yarn安装
yarn add react-router-dom)
3.全局引入
在index.js中引入 import ‘antd/dist/antd.css’;
在组件里引入组件就可以使用了,例如组件里使用button:
React Ant的项目引用的简单应用
将组件引入到App.js中
React Ant的项目引用的简单应用
通过在cmd输入npm start或 yarn start启动项目查看效果
React Ant的项目引用的简单应用
4.按需引入
(1) yarn add react-app-rewired customize-cra(npm i react-app-rewired customize-cra)
react-app-rewired 不用弹射就可以配置webpack
customize-cra 自定义脚手架环境
(2)修改package.js的配置
React Ant的项目引用的简单应用

(3)然后在项目的根目录建一个配置文件config-overrides.js ,用于修改默认配置
(4)安装下载babel-plugin-import(用于按需加载组件代码和样式的 babel 插件)
yarn add babel-plugin-import(npm i babel-plugin-import)
(5)在config-overrides.js中写入:
React Ant的项目引用的简单应用

(6)然后在项目中可以按需引入,例如在App.js中
React Ant的项目引用的简单应用
更多配置问题及引入组件查看官网

我是小白,以上为个人理解,如有问题请指出

NZ

相关文章: