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:{''},
}
})
);