ui库
ant design mobile 移动端
ant design pc端
yarn add antd 安装这个第三方的插件
全局引入(不推荐)：
路口文件：import ‘antd/dist/antd.css‘;
组件里：
import { Button } from ‘antd‘;
<Button type="primary">Button</Button>
按需加载：
1.先安装yarn add react-app-rewired customize-cra
yarn add react-app-rewired不用弹射就可以配置webpack
customize-cra 自定义脚手架的环境
2.改package.json
"scripts": {
"start": "react-app-rewired start",、
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
3.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
4.安装yarn add babel-plugin-import
配置文件config-overrides.js ：
const { override, fixBabelImports } = require(‘customize-cra‘);
module.exports = override(
fixBabelImports(‘import‘, {
libraryName: ‘antd‘,
libraryDirectory: ‘es‘,
style: ‘css‘,
}),
);
5.自定义主题
6.react cli环境下用@符号指向src
addWebpackAlias
const { addWebpackAlias} = require(‘customize-cra‘);
const { resolve } = require(‘path‘) ;
addWebpackAlias({
"@":resolve("src")
})
7.装饰器@babel/plugin-proposal-decorators 编译类语法装饰器语法变成es5的语法
yarn add @babel/plugin-proposal-decorators
const { addDecoratorsLegacy} = require(‘customize-cra‘);
const { addDecoratorsLegacy } = require(‘customize-cra‘);
module.exports = override(
addDecoratorsLegacy();
);
用法：@高阶组件
class 组件 extends Component{
}
等价于Hoc(组件)
原文地址：https://www.cnblogs.com/dongdong1996/p/12369527.html