一份在React中使用antd的指南✨请收下
开篇
最近在和老师一起学习react，准确来说其实是复习，之前vue2转react又从react转vue3，来来回回的，react都快忘记的差不多了。趁着这个掘金的新人计划，我！邵小白又回来继续写文章了（后悔没早点开始）。这篇文章主要面向的是和我一样接触react时间不长，对antd库不熟悉的小白，大佬的话就。。。hhh(图个乐就好) 废话不多说了，我们直接开始吧。
看完你将收获
- antd基本使用
- antd主题配置
- react中配置别名以及vscode智能提示功能
antd是什么？ --传统
简单来说 antd-全程: ant design 是蚂蚁金服推出的一款UI组件库
(别人写好了的东西我们只需要会使用就行,当然有些时候看文档也不是一件很简单的事情)
这是它的官方地址
antd分析 --异能
antd的js代码默认支持基于es modules的three shaking
也就是说我们在使用antd的时候例如import {Button} from 'antd'就会有按需加载的效果
不会一次将所有组件导入，当然基本上组件库都会有这个功能，别着急我们继续看
兼容性
- ie11以上（需要polyfills）
- 支持服务端渲染
- electron ---进行桌面应用开发的一套框架
安装和基本使用
安装
yarn add antd 或者是 npm i antd -S -S的意思就是save保存，项目上线也需要
导入样式文件index.js
import 'antd/dist/antd.css' 脚手架会默认帮我们从node_modules中需要对应的组件库
使用
一般情况，使用组件库都是参考官方文档来进行coding，这里我用最简单的button来举个栗子
App.js
import React, { PureComponent } from 'react' import { Button } from 'antd' export default class App extends PureComponent { render () { return ( <div> <Button type='primary'>按钮</Button> </div> ) } }
这样就可以直接看到效果啦
这个时候有细心的同学就问了？ 为什么你的按钮和我的颜色不一样，别着急继续往下看
antd主题定制
有看官网的同学应该知道，antd组件库的主题颜色是一种很好看的蓝色，那如果我们想要修改主题颜色怎么办呢？
这个时候就可以使用craco 来进行主题配置了(官方说法:一个对 create-react-app 进行自定义配置的社区解决方案)当然craco的功能不止这些。想要了解更多的可以去craco-npm
主题配置流程
修改package.json
通过craco启动服务，脚手架会去读取根目录下的carco.config.js文件
配置craco.config.js
const CracoLessPlugin = require('craco-less'); const path = require("path") const resolve = dir => path.resolve(__dirname, dir) module.exports = { plugins: [ //使用插件列表 { plugin: CracoLessPlugin, options: { lessLoaderOptions: { //这里依赖lessLoader lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, //配置主题颜色 javascriptEnabled: true, // 组件库中使用到了less编写了函数，需要开启或者配置项 }, }, }, }, ], };
引入less样式文件
在index.js中 import 'antd/dist/antd.less'，停止服务，重新启动即可更改主题颜色。
路径别名
很多时候当我们的组件越来越多的时候，想要更合理的管理我们的组件就不得不使用更多的文件夹，但是同一个文件夹下又嵌套着其他文件夹，导入组件或者其他东西就很可能出现这样的代码import HelloComponent from '../../../components/hello/index.js'(index.js可以省略)，降低了我们的开发效率。
使用类似 import HelloComponent from 'components/hello' 难道不香吗
配置如下 建议收藏
在craco.config.js中配置 alias
...... module.exports = { plugins: [ ..... ..... ], webpack: { alias: { "@": resolve("src"), "components": resolve("src/components") } } };
创建jsconfig.json文件
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"], "components/": ["src/components/*"] } }, "exclude": ["node_modules", "dist"] }
开启vscode checkJs功能
不开启很可能会报这样# JSON schema for a JavaScript project using TypeScript tooling一个错误
好了接下来就可以进行开发了，本文到这里也就结束了。
结尾
很喜欢若川大佬名字 ‘上善若水，海纳百川’
未来持续更新，感谢喜欢，我是邵小白，一位正在前端领域摸爬滚打的不羁少年。
