react + react-router + less +antd 开发环境搭建

1.基于create-reacte-app,需要先安装这个脚手架,然后初始化项目。

2.进入项目目录,首先 npm run eject 释放配置文件。

3.安装各种包

npm install react-router react-router-dom less less-loader antd react-redux --save

4.安装完之后,要去config文件夹下配置 less-loader

修改 webpack.config.dev.js 和 webpack.config-prod.js 这两个配置文件

test: /.css$/ 改为 /.(css|less)$/
test: /.css$/ 的 use 数组配置增加 less-loader

5.如果antd需要按需引入,参照antd官网 安装两个包,进行配置。

6.如果是原来的项目需要eject ,那么要保证仓库里没有 待追踪的文件。 可以先提交一次。再eject。还有一点,如果antd按需加载之后,需要把 eject命令 ,换回 react-script命令。

react + react-router + less +antd 开发环境的更多相关文章

  1. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  2. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  3. react 基础语法复习1- 搭建开发环境

    之前有看过阮一峰老师的react教程跟着做了一遍,学习了一下.好久没看,有点忘记了,这次跟着脚手架工具系统的复习一遍.顺便学习学习 react-router 和 redux 首先,脚手架工具我使用的是 ...

  4. Mac电脑配置IOS React Native开发环境配置笔记

    React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...

  5. 从零开始搭建webpack+react开发环境

    环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...

  6. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  7. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  8. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  9. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

随机推荐

  1. 解决UITableView上的cell的重用

    1.通过为每个cell指定不同的重用标识符(reuseIdentifier)来解决 //        static NSString *rankCellIndefier = @"rankC ...

  2. windows 10 下配置安装node.js

      环境配置 node.js windows10 25.5k 次阅读  ·  读完需要 6 分钟 5 在去年就自己配置安装过node.js,但是使用npm安装模块时安装成功后调用require('mo ...

  3. [kuangbin]树链剖分 D - 染色

    https://vjudge.net/contest/251031#problem/Dhttps://blog.csdn.net/kirito_acmer/article/details/512019 ...

  4. mysql变更数据的捕获和入库

    问题:涉及状态的信息,mysql中是update的,缺少中间状态的记录.数据分析中需要这部分数据. 思路:后端服务通过监控某张表的某个字段,根据mysql的binlog文件,还原数据,发送到kafka ...

  5. AngularJS 模块及provide

    一.模块 模块是一些功能的集合,如控制器.服务.过滤器.指令等子元素组成的整体. 1.注册和使用 模块相当于是一个注册表,保存着名字和编程元素的对照表,可存入也可取出. angular.module( ...

  6. RxSwift学习笔记5:Binder

    使用 Binder 创建观察者 //Observable序列(每隔1秒钟发出一个索引数) let scheduleObservable = Observable<Int>.interval ...

  7. ThreadLocal实现线程级上下文

    一.ThreadLocal测试 package com.junge.threadlocal.context; /** * @author Administrator * */ public class ...

  8. [ASE][Daily Scrum]11.06

    我们的<坦克大战·无尽>正式开始动工了,今天的任务计划如下~ [Plan] View Shilin Liu 搭建好开发环境 收集素材         Control Jiafan Zhu ...

  9. 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用(转载)

    加密技术通常分为两大类:"对称式"和"非对称式". 对称性加密算法:对称式加密就是加密和解密使用同一个密钥.信息接收双方都需事先知道密匙和加解密算法且其密匙是相 ...

  10. Redis持久化之RDB&&AOF的区别

    在说Redis持久化之前,需要搞明白什么是数据库状态这个概念,因为持久化的就是将内存中的数据库状态保存到磁盘上.那么什么是数据库状态呢?Redis是一个key-value数据库服务器,一般默认是有16 ...