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

内容

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

Antd 蚂蚁框架

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

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

基本使用

1. 全部导入

安装：

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

2. 按需导入

①：安装 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 命令报错问题：

解决：需要通过 git 命令提交修改项，然后再重新执行 npm run eject命令

示例：

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

OVER