create-react-app+react-app-rewired引入antd实践
注:模块化按此方发
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实践的更多相关文章
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 从0开始,手把手教你使用React开发答题App
项目演示地址 项目演示地址 项目源码 项目源码 其他版本教程 Vue版本 小程序版本 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但 ...
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
- React Native发布APP之打包iOS应用
用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤.本文将向大家分享如何签名打包一款React Na ...
- React Native & CodePush & App Center
React Native & CodePush & App Center https://docs.microsoft.com/en-us/appcenter/distribution ...
- 七天接手react项目 系列 —— 尾篇(antd 和 mobx)
其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...
- [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 ...
- 【共享单车】—— React后台管理系统开发手记:AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- USACO1.6 Number Triangles [dp-简单dp]
题目传送门 回忆童年 /* ID: Starry21 LANG: C++ TASK: ariprog */ #include<iostream> #include<string> ...
- 深入理解java:3. NIO 编程
I/O简介 I/O即输入输出,是计算机与外界世界的一个借口. IO操作的实际主题是操作系统. 在Java编程中,一般使用流的方式来处理IO,所有的IO都被视作是单个字节的移动,通过stream对象一次 ...
- 【Linux 网络编程】字节序和地址装换
(3)字节序 <1>大端字节序 最高的有效位存储于最低内存地址处,最低有效位存储于最高内存地址处. <2>小端字节序 最高的有效位存储于 ...
- linux命令 集合
ps:查看所有进程 // -e :显示所有进程:-f:代表全格式 ps -ef | grep python :查看后台运行的python程序,| 表示管道,grep表示筛选 & 符号:后台执行 ...
- numpy-数据格式之 int 与 uint
概念 整型分为 有符号整型 和 无符号整型,其区别在于 无符号整型 可以存放的正数范围 比 有符号整型 大一倍,因为 有符号整型 将最高位存储符号,而 无符号整型 全部存储数字 # 1 111000 ...
- log4net日志输出配置即输出到文件又输出到visual studio的output窗口
<configuration> <configSections> <section name="log4net" type="log4net ...
- java 实现傅立叶变换算法 及复数的运算
最近项目需求,需要把python中的算法移植到java上,其中有一部分需要用到复数的运算和傅立叶变换算法,废话不多说 如下: package qrs; /** * 复数的运算 * */ public ...
- vue使用Vuex, IE浏览器报错
错误: [vuex] vuex requires a Promise polyfill in this browser. 原因:因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本 ...
- ——HTTP状态码
200 请求成功,请求所希望的响应头或数据体将随此返回 302 请求的资源现在临时从不同的URI响应请求,由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求. 304 如果客户端发送了一 ...
- ip - Linux IPv4 协议实现
SYNOPSIS(总览) #include <sys/socket.h> #include <net/netinet.h> tcp_socket = socket(PF_INE ...