注:模块化按此方发
npm install antd --save
npm install babel-plugin-import --save-dev
npm install react-app-rewired customize-cra

  

修改package.json下的

改成(如下图)

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

在项目根目录下(和 package.json 同级)新建配置文件 config-overrides.js ,并添加如下内容,这是默认的,

module.exports = function override(config, env) {

// 在这里添加配置

return config;

}

  

如果要接入第三方要这样

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);

  如果报错了那肯定是看了网上的文章

那肯定是没有安装  customize-cra

https://ant.design/docs/react/use-with-create-react-app-cn(把这个页面好好看看)

create-react-app+react-app-rewired引入antd实践的更多相关文章

  1. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  2. 从0开始,手把手教你使用React开发答题App

    项目演示地址 项目演示地址 项目源码 项目源码 其他版本教程 Vue版本 小程序版本 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但 ...

  3. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  4. React Native发布APP之打包iOS应用

    用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤.本文将向大家分享如何签名打包一款React Na ...

  5. React Native & CodePush & App Center

    React Native & CodePush & App Center https://docs.microsoft.com/en-us/appcenter/distribution ...

  6. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  7. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  8. 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  9. 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

随机推荐

  1. sublime3配置php开发环境

    Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...

  2. linux 磁盘命令

    用到共享软件为:samba 配置文件为  /etc/samba/smb.conf sudo fdisk -l 查看磁盘 sudo df -lh 查看磁盘挂载情况 sudo mount /dev/sdb ...

  3. 【神经网络与深度学习】Caffe使用step by step:caffe框架下的基本操作和分析

    caffe虽然已经安装了快一个月了,但是caffe使用进展比较缓慢,果然如刘老师说的那样,搭建起来caffe框架环境比较简单,但是完整的从数据准备->模型训练->调参数->合理结果需 ...

  4. 【VS开发】【图像处理】相机中白平衡的算法模拟实现

    相机主要技术点为3A算法. 而3A算法主要指的是自动对焦(AF).自动曝光(AE)及自动白平衡(AWB).自动白平衡:根据光源条件调整图片颜色的保真程度. 网上时常有类似招聘如下的招聘信息: ---- ...

  5. MARKDOWN使用文档

    ISSUE引用 引用当前项目内的ISSUE #1 markdown写法 #1 引用当前命名空间下的其他项目内的ISSUE projectname#1 sofa_ta#1 markdown写法 sofa ...

  6. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  7. P1398 [NOI2013]书法家

    传送门 就是个普及组 $dp$ 合集,把 $NOI$ 从左到右拆成 $9$ 个部分,每个部分都可以分别 $dp$ 除了 $N$ 的中间部分比较恶心以外其他都还好,自己推一下然后就知道转移,就 $N$ ...

  8. [.net core]2.hello word(.net core web app模版简介)

    创建一个.net core web app project 弹出这个窗口 empty代表 最低依赖,  意味着往往需要手动按需添加依赖. web应用程序(模型视力控制器) 则会帮你创建好control ...

  9. ArcGIS 在VS2010中 ESRI.ArcGIS.SOESupport.dll 无法正常加载的处理

    转自  http://blog.csdn.net/tnt123688/article/details/23186973 问题描述: 打开ArcGIS的SOE模板后,提示  错误 命名空间“ESRI.A ...

  10. 常见SMT极性元器件识别方法

    极性元件在整个PCBA加工过程中需要特别注意,因为方向性的元件错误会导致批量性事故和整块PCBA板的失效,因此工程及生产人员了解SMT极性元件极为重要. 1.片式电阻(Resistor)无极性 2.电 ...