【React】从入坑到跑路：Ant Design of React 的使用

布满荆棘的人生 2022-12-01 11:58 195阅读 0赞

## 内容 ##

> 了解 Ant Design of React 组件库的基本使用

## Antd 蚂蚁框架 ##

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

其中涵盖 PC端：[Ant Design][]、移动端：[Ant Design Mobile][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]

##### 基本使用 #####

1.  全部导入

安装：

npm install antd-mobile 
    导入：
    import { Button } from 'antd-mobile';
    import 'antd-mobile/dist/antd-mobile.css';

1.  按需导入

①：安装 UI 组件库 ：`npm install antd-mobile`  
②：安装 `babel-plugin-import`插件 `npm install babel-plugin-import`  
③：进行 `bable` 的配置（通过 `npm run eject` 命令导出配置文件）  
④：在 `package.json` 中进行配置

"babel": { 
        "presets": [
          "react-app"
        ],
        "plugins": [
          ["import", {  "libraryName": "antd-mobile", "style": "css" }]
        ]
      }

⑤：在使用组件时无需导入全部样式，插件为我们自动分配

##### 注意：**关于 `npm run eject` 命令报错问题：** #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]  
解决：需要通过 `git` 命令提交修改项，然后再重新执行 `npm run eject`命令

示例：

git add .
    git commit -m '提交修改项'

## OVER ##

[Ant Design]: https://ant.design/index-cn
[Ant Design Mobile]: https://mobile.ant.design/index-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/adb06f82dd1c43b1aaa00b105b864f42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/829342127d7b443484dc073b9ba5222e.png