React 使用Ant Design组件2020年11月

今天同事问我一个问题，说他搭的ant项目样式错乱。我去看了一下，愣是看了半天没发现问题原因。最终后来才发现是Ant Design组件配置的问题。我不得不在这里吐槽一下And Design这篇文档https://mobile.ant.design/docs/react/introduce-cn，写的真不怎么样，关键地方不讲，我一个工作几年的人第一次看都有点蒙。

当前时间是：2020年11月04日。不排除是因为react手脚架更新导致配置发生变化了，对应文档没来急更新。我几个月前搭过一个使用Ant 组件的react项目，当时感觉没花多少时间，很简单。今天就把全新搭建过程记录下来，方便新手入门。

正片开始

吐槽完了 ，舒服多了，现在就开始吧。

 

create-react-app创建一个新的react项目

命令行中执行下面命令创建项目。

npx create-react-app ant-demo

这个过程有点久，我电脑需要2到5分钟左右。

显示这样就创建成功啦。

安装ant design组件

npm install antd-mobile --save

 安装没什么好说的，执行一下就好了。

配置入口文件html

public/index.html的头部加入以下内容：

  
  
  
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln(''+'');
    }
  

修改以后的完整代码如下：

  
    
    
    
    
    
    
    
    
    
    React App
    
  
  
  
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln(''+'');
    }
  
  
  
    You need to enable JavaScript to run this app.
    

    
  

配置按需加载（重点）

重点来了，官方文档就是这里写的不太清楚，对新手不友好。

先安装下面已的组件。

npm install react-app-rewired customize-cra babel-plugin-import

在根目录新建config-overrides.js文件

此配置文件录入以下内容：

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
);

修改packge.json 的配置文件

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react--app-rewired test",
    "eject": "react-scripts eject"
  },

至此配置完成啦！！！ 

测试效果

修改App.js为以下内容

import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
import React from "react";

function App() {
  return (
    
    default
    default disabled

    primary
    primary disabled

    warning
    warning disabled

    loading button
    with icon
    with custom icon
    { marginRight: '4px' }}with icon and inline
    with icon and inline
    

    {/* 无点击反馈 */}
    {/* { backgroundColor: 'red' }}custom feedback style */}

    
    { marginRight: '4px' }}inline primary
    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
    { marginRight: '4px' }} className="am-button-borderfix"inline ghost

    
    { marginRight: '4px' }}primary
    primary disabled
    
    { marginRight: '4px' }}ghost
    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
    ghost disabled
  
  );
}

export default App;

 

完美解决了

 

源码下载（我配置的这套）：

https://download.csdn.net/download/lxyoucan/13087671