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换成国内的淘宝源。出现下面的信息就是项目创建成功了。
由于我安装了yarn,所以提示是如何使用yarn启动、构建项目,正常的话应该是显示npm start
等。
3. 安装Antd
现在项目已经创建好了,用我们的IDE打开这个项目。在IDE的终端里输入npm install antd --save
或yarn add antd
命令安装Antd框架。
至此,就可以使用Antd写一些非常漂亮的页面了。但是,如果你还想自己配置主题的话,那吗还需要一些操作才能完成。
4. 高级配置
在终端里运行npm install react-app-rewired customize-cra --save
或yarn add react-app-rewired customize-cra
命令。这两个库是对create-react-app进行自定义配置的社区解决方案。安装成功之后&#x