注:模块化按此方发
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. 【VS开发】使用WinPcap编程(2)——打开网络设备并且开始捕获数据包

    这里需要特别强调的一个数据结构是pcap_t,它相当于一个文件描述符,代表一个已经打开的设备.我们对这个设备进行操作,就是对这个文件描述符进行操作. 首先是打开一个已知的设备,使用pcap_open( ...

  2. iview Upload组件多个文件上传

    使用  iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before ...

  3. get、set快捷键那码事儿

    今天发现一个省时间的方法.get一下,哈哈 在快捷get/set.或其他那个页面上的方法时,只需Shift+Alt+s 然后,选择哪个方法,就按该方法字母下有横线的那个字母(只按单个字母就行) 在ge ...

  4. oracle创建表示例

    create table wf_message_weixinqun(dizhi VARCHAR2(200) not null, weixinnicheng VARCHAR2(6) not null,w ...

  5. Webstorm 2019激活码(有效期至2020年6月5日)

    Webstorm 2019激活码(有效期至2020年6月5日):https://blog.csdn.net/lt326030434/article/details/90229298

  6. python-day18(正式学习)

    目录 numpy模块 numpy简介 为什么要用numpy 创建numpy数组 numpy数组的基本属性 获取numpy数组的行列数 切割numpy数组 numpy数组元素替换 numpy数组的合并 ...

  7. 分位数回归及其Python源码

    分位数回归及其Python源码 天朗气清,惠风和畅.赋闲在家,正宜读书.前人文章,不得其解.代码开源,无人注释.你们不来,我行我上.废话少说,直入主题.o( ̄︶ ̄)o 我们要探测自变量 与因变量 的关 ...

  8. Android多渠道打包且根据不同产品打包不同的assets资源目录

    因为项目中存在多种环境,既要区分bebug与release版本,release又要区分测试环境与生产上线环境,每次打包都得浪费不少的等待时间:并且哪个版本有问题还得去切换环境一个个打包,关键是还得牢记 ...

  9. 2019-11-29-git-需要知道的1000个问题

    title author date CreateTime categories git 需要知道的1000个问题 lindexi 2019-11-29 8:36:7 +0800 2018-2-13 1 ...

  10. dubbo 2.8.4(dubbox)的jar包制作【添加到maven本地仓库】

    1. 下载 网址:https://github.com/hongmoshui/dubbox 2.  解压zip文件 3.  用maven编译文件 如果没有配置全局maven,就直接使用cmd命令行[进 ...