注:模块化按此方发
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. 数据库SQL语句查询指定时间段内的数据

    [摘要]有的时候,我们需要查询数据库某段时间之间的数据,比如2016年5月1号到到5月3号之间用户注册数量(特殊节假日期间)等.那么用SQL语句如何实现呢? 首先,数据表中的存时间的字段比如是addt ...

  2. [转帖]Ubuntu忘记超级用户root密码,重新设置密码

    Ubuntu忘记超级用户root密码,重新设置密码 版权声明:本文为博主原创文章,转载必须指明出处. https://blog.csdn.net/weixin_37909391/article/det ...

  3. 【6.24校内test】T2 不老梦

    [题目背景] 于万人中万幸得以相逢,刹那间澈净明通. 成为我所向披靡的勇气和惶恐,裂山海,堕苍穹. 爱若执炬迎风,炽烈而哀恸,诸般滋味皆在其中. 韶华宛转吟诵,苍凉的光荣,急景凋年深情难共. ——银临 ...

  4. [ZJOI2007]时态同步 题解

    题面 这道题是一道比较水的XXOI题: 我们可以发现,反着思考题目就变为了让所有叶子节点同时发出信号,然后这些信号同时到达根节点: 可以证明,这样答案不会改变: 那么我们可以自下而上dfs(),设f[ ...

  5. Scrapy学习(二)

    1.在合适的位置创建一个文件夹,创建python虚拟环境: 2.在虚拟环境中安装Scrapy库和pypiwin32库: 命令:pip install scrapy pip install pypiwi ...

  6. 从入门到自闭之python三大器--装饰器

    开放封闭原则:在不修改源代码及调用方式,对功能进行额外添加就是开放封闭原则 开放:对代码的扩展进行开发 封闭:修改源代码 装饰(额外功能) 器:工具(函数) 普通版: # print(time.tim ...

  7. 使用CefSharp在.NET中嵌入Google kernel

    原文:使用CefSharp在.NET中嵌入Google kernel 使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分 ...

  8. 作业调度框架Quartz.NET-现学现用-02-任务监听 - 简书

    原文:作业调度框架Quartz.NET-现学现用-02-任务监听 - 简书 前言 任务调度系统并不是完美的,它会出现任务执行失败的情况.如果你需要处理任务失败后的逻辑,希望这篇笔记可以为你提供些帮助. ...

  9. Spring+Spring MVC+Hibernate框架搭建实例

    前言:这里只是说明整个搭建流程,并不进行原理性的讲解 一 下面所需要用到的数据库配置: 数据库方面,使用mysql创建一个users表,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 ...

  10. Java Blob类型和String类型相互转换

    1.String 转 Blob: String content = "Hello World!"; Blob blob = Hibernate.createBlob(content ...