react + react-router + less +antd 开发环境
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 开发环境的更多相关文章
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- react 基础语法复习1- 搭建开发环境
之前有看过阮一峰老师的react教程跟着做了一遍,学习了一下.好久没看,有点忘记了,这次跟着脚手架工具系统的复习一遍.顺便学习学习 react-router 和 redux 首先,脚手架工具我使用的是 ...
- Mac电脑配置IOS React Native开发环境配置笔记
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...
- 从零开始搭建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 ...
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
随机推荐
- 图片轮滚形式A
思想解读: 一共有5幅图片,初始时只显示一幅,其余四幅隐藏.然后使用trigger设置右下角的点击事件,根据点击的索引显示某幅图片.原理不算复杂. 结论: trigger的使用,模拟点击 层淡入淡出函 ...
- 记录:CSS特殊性——权值规则
浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...
- docker+phantomjs+haproxy 搭建phantomjs集群
目标: 搭建一个远程的phantomjs服务器,提供高可用服务,支持并发. 原料: 1.docker环境.docker-compose环境 2.phantomjs镜像: docker.io/werni ...
- express4.x socket
在这个版本下使用socket,配置比较麻烦. 使用实例:http://www.open-open.com/lib/view/open1402479198587.html 配置文件:BarOrderPr ...
- SET FOREIGN_KEY_CHECKS=0;在Mysql中取消外键约束
Mysql中如果表和表之间建立的外键约束,则无法删除表及修改表结构. 解决方法是在Mysql中取消外键约束: SET FOREIGN_KEY_CHECKS=0; 然后将原来表的数据导 ...
- Java设计模式详尽资料
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- 安装json插件
谷歌浏览器中安装JsonView扩展程序 实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的json数据能否按照json格式展现出来. 比如,在谷歌浏览器中 ...
- 发送短信功能(C#)
参考自:https://blog.csdn.net/whl632359961/article/details/73468115 https://www.cnblogs.com/ywl925/archi ...
- 【计算机网络】数据交换技术和多路复用技术的正(nao)确(can)打开方式
交换的作用 数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么? “交换”的作 ...
- Linux基础命令-cd
cd 作用:切换路径 切换至家目录 $ cd $ cd~ 在上一个目录和当前目录来回切换 $ cd - 切换至某用户的家目录 # cd ~ # pwd /root # cd ~quail #pwd / ...