react 的ui库

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