react使用antd

1.流行的开源React UI组件库

       前端框架ui库最多的是vue，然后是react，然后是angular。

material-ui(国外)       

        官网: http://www.material-ui.com/#/

        github: https://github.com/callemall/material-ui

ant-design(国内蚂蚁金服) 使用量最大

        官网: Ant Design - 一套企业级 UI 设计语言和 React 组件库

        Github: https://github.com/ant-design/ant-design/

element ui 

移动端ui vant 

2.antd使用步骤

1）安装antd 

yarn add antd

2）使用的组件引入组件库和css文件

        如下会将antd.css所有样式引入，比较大；另外使用默认主题

import { Button } from 'antd';
import 'antd/dist/antd.css'

3）根据官网文档 引入具体组件到项目

4)antd使用项目

        并不是所有项目都适合antd，antd提供的组件样式固定，不适合大型的样式需求多变项目。

        适合的项目是后台管理系统，因为这种系统不追求样式多变，系统稳定就好。

3.按需引入和自定义主题

1）安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

2）修改package.json 

....

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

 ....

 3）根目录下创建config-overrides.js                 

//配置具体的修改规则

const { override, fixBabelImports,addLessLoader} = require('customize-cra');

module.exports = override(
        fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions:{
        javascriptEnabled: true,
        modifyVars: { '@primary-color': 'green' },
        }
    }),
);

4）备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉