6. React-UI antd

vant：网易的UI

element：饿了么的UI

ant-d：蚂蚁金服的UI。antd适用于的项目：成型的后台管理项目。

 

0 antd 版本兼容问题出错：：：：

一定要点4.x版本：

import { SmileOutlined } from '@ant-design/icons';

<WechatOutlined />

原因：https://blog.csdn.net/qq_23956389/article/details/111518176

 

 

1 antd 按需引入样式！！！

不能  ：import 'antd/dist/antd.css';（一共60kb）

按需引入：修改脚手架的配置。create-react-app demo

yarn eject: y

暴露依赖：

yarn add react-app-rewired customize-cra

(启动脚手架，执行命令)

创建： config-overldes.js   :用于说明 修改默认配置！

 

按需引入，yarn add babel-plugin-import 

const {override,fixBabelImport }

 

yarn start : react -scripts start

 

 

2 antd-自定义主题：

主题元素：1 工作量太大。2 覆盖不了权重。

antd底层：less-》css。所有在less底层就把css修改了

安装：yarn add less less-loader

配置(4,x需要lessOption）：

const  {overrilder,fixBableImoort ,addLessLoader} = require('custom-rcar');

module.exports = overrider(

fixBabelImports('import',{

libraryName:'antd',

style:true

})

addLessLoader({

lessOption:{

　　javascriptEnabled:true,//允许js修改底层的less

　　modif:{''},

}

})

）；