注:模块化按此方发
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. USACO1.6 Number Triangles [dp-简单dp]

    题目传送门 回忆童年 /* ID: Starry21 LANG: C++ TASK: ariprog */ #include<iostream> #include<string> ...

  2. 深入理解java:3. NIO 编程

    I/O简介 I/O即输入输出,是计算机与外界世界的一个借口. IO操作的实际主题是操作系统. 在Java编程中,一般使用流的方式来处理IO,所有的IO都被视作是单个字节的移动,通过stream对象一次 ...

  3. 【Linux 网络编程】字节序和地址装换

    (3)字节序    <1>大端字节序        最高的有效位存储于最低内存地址处,最低有效位存储于最高内存地址处.    <2>小端字节序        最高的有效位存储于 ...

  4. linux命令 集合

    ps:查看所有进程 // -e :显示所有进程:-f:代表全格式 ps -ef | grep python :查看后台运行的python程序,| 表示管道,grep表示筛选 & 符号:后台执行 ...

  5. numpy-数据格式之 int 与 uint

    概念 整型分为 有符号整型 和 无符号整型,其区别在于 无符号整型 可以存放的正数范围 比 有符号整型 大一倍,因为 有符号整型  将最高位存储符号,而 无符号整型 全部存储数字 # 1 111000 ...

  6. log4net日志输出配置即输出到文件又输出到visual studio的output窗口

    <configuration> <configSections> <section name="log4net" type="log4net ...

  7. java 实现傅立叶变换算法 及复数的运算

    最近项目需求,需要把python中的算法移植到java上,其中有一部分需要用到复数的运算和傅立叶变换算法,废话不多说 如下: package qrs; /** * 复数的运算 * */ public ...

  8. vue使用Vuex, IE浏览器报错

    错误:  [vuex] vuex requires a Promise polyfill in this browser. 原因:因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本 ...

  9. ——HTTP状态码

    200 请求成功,请求所希望的响应头或数据体将随此返回 302 请求的资源现在临时从不同的URI响应请求,由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求. 304 如果客户端发送了一 ...

  10. ip - Linux IPv4 协议实现

    SYNOPSIS(总览) #include <sys/socket.h> #include <net/netinet.h> tcp_socket = socket(PF_INE ...