react 的ui库

Posted 2021-03-07 dongdong1996

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(组件)