React降级配置及Ant Design配置详解

React降级配置

1.使用create-react-app创建一个目录

2.查看当前目录下的package.json文件中的配置

注意：

可以看到当前的react-scripts是2.1.2版本，且只兼容IE11以上，所以为了更好地兼容IE浏览器，我们需要做降级配置

3.进入目录，在master分支下进行配置（如果创建好的目录中没有.git文件，使用git init初始化目录）

注意：

之所以要在master分支下进行配置，是为了在下文中运行 npm run eject

4.将原来的react-script删除

5.重新安装对应版本(比如1.x的版本，比较稳定的版本)

6.添加git库（将以上做的修改添加到git库，这也是为什么如果没有.git文件，一定要先初始化）

7.运行npm run eject（如果有报错，可以不用管，只要有ejected successfully就可以）

8.由于重新配置可以先删除node-moduls，然后在 npm i重新安装依赖

9.npm start,查看是否能运行(可能会报错，解决方法再下面)

10.删除package.json中的browserslist(因为这个配置是react-scripts2.x版本的，再降级以后，如果还存在，代码运行会报错)

配置less

1.src中内容可以都删除，留下index.js

2.创建一个App.js（此时查看是否能运行，显示App.js的内容）

3.创建App.less，并将文件引入到App.js中（import './App.less'）

4.安装less包

5.进行less文件的配置，找到config中的dev文件

6.找到里面的css的配置，复制一份到css配置文件的下方，将loader中css换成less-loader以及options为以下内容

7.配置完选项，需要重启项目才能生效

此时配置的less已经生效

Ant Design 配置

1.安装antd

2.安装按需加载组件代码和样式的插件

3.在package.json的babel中配置（注意要在babel中进行配置，不要写在babel外面去了）

4.测试引用button为例（先重启）

5.配置ant中的样式变量

以下是可以配置的样式变量

6.除了第5条的配置的方法，还可以引入配置（新建配置文件color.js在config文件中）

7.在dev中引入colors.js，再调用

8.在prod中和dev中一样修改less、引入默认colors

9.最后npm run build检查是否会出错

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Ant Design of React的安装和使用方法

    详解Ant Design of React的安装和使用方法

    在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率.我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design.旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源. Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言.它模糊了产品经理.交互设计师.视觉设计师.前端工程师.开发工程师等

  • React降级配置及Ant Design配置详解

    React降级配置及Ant Design配置详解

    React降级配置 1.使用create-react-app创建一个目录 2.查看当前目录下的package.json文件中的配置 注意: 可以看到当前的react-scripts是2.1.2版本,且只兼容IE11以上,所以为了更好地兼容IE浏览器,我们需要做降级配置 3.进入目录,在master分支下进行配置(如果创建好的目录中没有.git文件,使用git init初始化目录) 注意: 之所以要在master分支下进行配置,是为了在下文中运行 npm run eject 4.将原来的react

  • webpack 2.x配置reactjs基本开发环境详解

    本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打

  • Nginx反向代理一个80端口下配置多个微信项目详解

    Nginx反向代理一个80端口下配置多个微信项目详解

    Nginx反向代理一个80端口下配置多个微信项目详解 我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎么办? 我们可以用nginx服务器做反向代理来解决这个问题.nginx服务器对外80端口,然后根据URL参数不同,对内访问不同的项目. nginx配置如下: 打开/usr/local/nginx/conf/nginx.conf worker_pr

  • windows系统下node.js环境配置与安装教程图文详解(详细版)

    windows系统下node.js环境配置与安装教程图文详解(详细版)

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网https://nodejs.org/en/download/ 这里用的是 第二步:安装nodejs 下载完成之后,双击 node-v6.9.1-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面 第三步:安装相关环境 打开C:\Program Files\

  • servlet配置方法及其生命周期详解

    servlet配置: 在web.xml中,首先向服务器注册一个servlet.在<servlet>标签下 给定一个servlet名字,这个servlet-name是我们自己用的,方便我们用它对servlet进行配置. 1 <servlet-name>AServlet</servlet-name>然后指定一个全类名,这个是给服务器使用,服务器用来创建全类名对象的实例 1 <servlet-class>com.servlet.AServlet</servl

  • Intellij IDEA 配置Subversion插件实现步骤详解

    Intellij IDEA 配置Subversion插件实现步骤详解

    Intellij IDEA 配置Subversion插件实现步骤详解 在使用Intellij的过程中,突然发现svn不起效了,在VCS–>Checkout from Version Control中也未发现Subversion这一项.如下图: 一.原因查找 经过分析是因为插件被禁用或移除导致此功能失效. 二.解决方案 打开Settings,Plugins,搜索Subversion,在筛选出结果的方框上打勾,即可启动插件.如下图: 三.使用方法 点击VCS–>Enable Version -.-

  • 对python csv模块配置分隔符和引用符详解

    如下所示: file = open('./abc.csv') csv.reader(file, delimiter=',', quotechar='"') 说明:delimiter是分隔符,quotechar是引用符,当一段话中出现分隔符的时候,用引用符将这句话括起来,就能排除歧义. 以上这篇对python csv模块配置分隔符和引用符详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • nginx 配置服务启动的教程详解

    1.    先去官网下载nginx 安装到本地 2.    下载Windows Service Wrapper (WinSW.NET4.exe (64) , WinSW.NET2.exe(86)) 根据自己系统去下载相应的 3.    (1)把WinSW.NET4.exe  放到nginx  文件名称改成自己想要的 (2)创建一个.xml的文件,需要跟WinSW.NET4.exe 这个改成自己的文件名字相同 4.    打开.xml 添加下面一段(把路径设置自己nginx路径) <service

  • java property配置文件管理工具框架过程详解

    这篇文章主要介绍了java property配置文件管理工具框架过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 property property 是 java 实现的 property 框架. 特点 优雅地进行属性文件的读取和更新 写入属性文件后属性不乱序 灵活定义编码信息 使用 OO 的方式操作 property 文件 支持多级对象引用 快速开始 环境依赖 Maven 3.x Jdk 1.7+ Maven 引入依赖 <depende

  • idea安装与配置及基本用法教程详解

    Intellij IDEA 确实使用更加方便,由于目前只用到maven项目,所以此处只记录maven项目的配置. 一.配置idea前准备: 1.下载idea安装包.jdk安装包.maven安装包.git安装包.均去官网下载并安装,网上很多,此处不再赘述.(注意:常见的src文件是源码,bin是使用,所以下载时我们下载bin文件) 二.配置idea 1.点开idea图标,点create new project,按照流程一步一步配置jdk,maven等,配置结束. 2.运行idea,进入idea主界

随机推荐