react antd 全局引入及按需引入笔记
首先你得有一个项目
这是 create-react-app 生成的默认目录结构。
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── package-lock.json
全局安装
首先安装依赖包
-npm install antd --save
引入css样式库
修改 src/App.css,在文件顶部引入 antd/dist/antd.css。
-@import 'antd/dist/antd.css';
引入控件测试
import React from 'react';
import {
Button } from 'antd';
import './App.css';
const App = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
然后启动项目
-npm start
按需加载
首先安装依赖包
-npm install antd --save
-npm i react-app-rewired
//不用弹射就可以配置webpack
-npm i customize-cra
//自定义脚手架环境
修改package.json
(“+”号表示新增,“-”表示删除,)
"scripts": {
- "start"