React是目前非常火的一个用于构建用户界面的JavaScript库，它使创建交互式 UI 变得轻而易举。Antd是蚂蚁金服推出的基于Ant Design 设计体系的 UI 组件库，主要用于研发企业级中后台产品。Antd提供的组件不仅简约大气，而且功能强悍，还支持自定义主题、暗黑模式、数十个国际化语言等，提供了React、Vue、Angular等多种实现方式。接下来我将详细讲解在React脚手架中如何配置Antd。
1. 环境
-
node.js
-
一款编辑器（VS code、IDEA、WebStrom等）
2. 创建项目
在项目文件目录下打开cmd命令行，使用npm install -g create-react-app命令全局安装create-react-app脚手架工具（安装一次后不用再次安装）。
运行create-react-app my-web命令（my-web为自己的项目名称），创建自己的项目。这个过程会下载很多依赖，如果下载速度很慢，可以先终止此次操作，运行npm config set registry https://registry.npm.taobao.org/命令，将npm换成国内的淘宝源。出现下面的信息就是项目创建成功了。
项目创建成功.png
由于我安装了yarn，所以提示是如何使用yarn启动、构建项目，正常的话应该是显示npm start等。
3. 安装Antd
现在项目已经创建好了，用我们的IDE打开这个项目。在IDE的终端里输入npm install antd --save或yarn add antd命令安装Antd框架。
安装antd.png
至此，就可以使用Antd写一些非常漂亮的页面了。但是，如果你还想自己配置主题的话，那吗还需要一些操作才能完成。
4. 高级配置
在终端里运行npm install react-app-rewired customize-cra --save或yarn add react-app-rewired customize-cra命令。这两个库是对create-react-app进行自定义配置的社区解决方案。安装成功之后，修改package.json里的启动配置如下：
"scripts":{
"start":"react-app-rewired start",
"build":"react-app-rewired build",
"test":"react-app-rewired test",
"eject": "react-app-rewired eject"
}
然后运行npm install babel-plugin-import less less-loader@5或yarn add babel-plugin-import less less-loader@5。其中，babel-plugin-import是一个用于按需加载组件代码和样式的babel插件，less和less-loader则是用于自定义主题的框架。
特别注意：less-loader@5千万不要少了后面的“@5”，否则会默认安装最新的第6版，而这会导致修改主题后，出现项目编译失败的错误。
编译出错.png
然后在项目的根目录下创建一个config-overrides.js用于修改默认配置。
const {
override,
fixBabelImports,
addLessLoader
} = require('customize-cra');
module.exports = override(
// 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
style:true,//自动打包相关的样式 默认为 style:'css'
}),
// 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
addLessLoader({
javascriptEnabled: true,
// 将默认的主题色修改为绿色，其余的颜色变量可前往antd官网查询
modifyVars:{'@primary-color':'#1DA57A'},
}),
);
到这里我们的配置就全部结束了，我们可以开始写代码看一下效果了。
5. 运行
在App.js里，将默认的代码修改如下：
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
class App extends Component {
render() {
return (
<div align="center">
Hello Antd！下面是一个Button。<br/>
<Button type="primary">按钮</Button>
</div>
)
}
}
运行npm start或yarn start命令启动项目，出现下面这样一个绿色的按钮就证明我们的配置成功了！
运行结果.png
6. 总结
最初按照官网的步骤配置主题，一直出现Failed to compile的错误，经过多次摸索之后才发现，可能是最新的less-loader导致的问题，于是将版本改回5.0.0才正常运行。因此，希望大家特别注意这一点。
网友评论