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. 图片轮滚形式A

    思想解读: 一共有5幅图片,初始时只显示一幅,其余四幅隐藏.然后使用trigger设置右下角的点击事件,根据点击的索引显示某幅图片.原理不算复杂. 结论: trigger的使用,模拟点击 层淡入淡出函 ...

  2. 记录:CSS特殊性——权值规则

    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...

  3. docker+phantomjs+haproxy 搭建phantomjs集群

    目标: 搭建一个远程的phantomjs服务器,提供高可用服务,支持并发. 原料: 1.docker环境.docker-compose环境 2.phantomjs镜像: docker.io/werni ...

  4. express4.x socket

    在这个版本下使用socket,配置比较麻烦. 使用实例:http://www.open-open.com/lib/view/open1402479198587.html 配置文件:BarOrderPr ...

  5. SET FOREIGN_KEY_CHECKS=0;在Mysql中取消外键约束

      Mysql中如果表和表之间建立的外键约束,则无法删除表及修改表结构.   解决方法是在Mysql中取消外键约束:  SET FOREIGN_KEY_CHECKS=0;     然后将原来表的数据导 ...

  6. Java设计模式详尽资料

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  7. 安装json插件

    谷歌浏览器中安装JsonView扩展程序 实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的json数据能否按照json格式展现出来. 比如,在谷歌浏览器中 ...

  8. 发送短信功能(C#)

    参考自:https://blog.csdn.net/whl632359961/article/details/73468115 https://www.cnblogs.com/ywl925/archi ...

  9. 【计算机网络】数据交换技术和多路复用技术的正(nao)确(can)打开方式

    交换的作用   数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么?   “交换”的作 ...

  10. Linux基础命令-cd

    cd 作用:切换路径 切换至家目录 $ cd $ cd~ 在上一个目录和当前目录来回切换 $ cd - 切换至某用户的家目录 # cd ~ # pwd /root # cd ~quail #pwd / ...