React 学习日志 - 第 6 章
最编程
2024-07-18 12:54:13
...
在b站尚硅谷学习React过程中,记录的学习笔记,希望能够帮到和我一样的前端热爱者!
094_尚硅谷_react教程_antd的基本使用_哔哩哔哩_bilibili
前五章笔记在这里:React学习记录 ---第一章-****博客
React学习记录 ---第二章-****博客
React学习记录---第三章-****博客
React学习记录 ---第四章-****博客
React学习记录 ---第五章-****博客
React UI组件库
ant-design(国内蚂蚁金服)
- 官网: Ant Design - 一套企业级 UI 设计语言和 React 组件库
- Github: GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library
antd适用于后台管理系统
其实还有一些其他组件库比如element-ui for react
Vant针对移动端设计,给vue用的
按需引入+自定义主题
antd底层是拿less写的,经过编译形成css
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' },
}
),
);
以上操作完:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉
推荐阅读
-
数学建模算法与应用》 第 6 章 微分方程及其解的建模
-
Redis 设计与实现》学习笔记 第 7 章 压缩列表
-
机器学习 Python 实践 - 第 3 章 - 分类问题 - 2. Logistic 回归算法 - 3.2.3 实践
-
数据库系统导论》(第 6 版)第 6 章课后习题答案
-
C++语言学习(9):C++编程原理与实践 第4章笔记
-
第 22 节:学习使用拦截器(自学 Spring boot 3.x 的第 6 天)--第 2 步:注册拦截器
-
SpringCloud 第 6 章(服务保护断路器)-2024
-
[第 2 章:开始学习 C++] 入门 C++
-
形而上学第 2 章 日志分析--redis 应急响应
-
学习笔记:探索CSAPP第3章