首页 > 其他分享 >react + react-router + less +antd 开发环境

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

时间:2023-09-26 21:15:10浏览次数:31  
标签:eject less loader react router antd

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命令。

标签:eject,less,loader,react,router,antd
From: https://www.cnblogs.com/sexintercourse/p/17731164.html

相关文章

  • 09_electron-vue-antd环境搭建
      electron-vue很好解决,安装antd给我弄自闭了,最终是发现是版本问题。  先把electron-vue环境搭建好,然后去看项目中的vue版本:    我的是vue2就使用快速上手-AntDesignVue(antdv.com)这个版本,之前一直使用的4.x版本,然后一直出错,但是我也去找了一些办......
  • Linux常用命令(cat,more,less,head,tail,clear,poweroff,reboot,alias,unalias,uname,hostname,hist
    本章学习Linux基础命令数量为18个123456catmorelessheadtailclearpoweroffrebootaliasunaliasunamehostnamehistorywhitchwcwwhowhoami1.cat命令作用:连接文件并在标准输出上输出(常用于查看内容较少的,会把所以查看的内容加载到内存中)。常用......
  • React表单合理取值方式
    React表单完全使用受控组件,即使用value和onChange来控制input状态<inputvalue={email}onChange={(e)=>setEmail(e.target.value)}/>在input输入字符时候,会频繁触发表单重新渲染,因为state改变,react进行了re-render要避免此种情况,可以使用非受控组件的表单,在组件之间没有......
  • 亚信科技AntDB数据库与优逸派科技基于人工智能的自动化运维管理平台产品完成兼容性互
    日前,亚信科技AntDB数据库与北京优逸派科技有限公司基于人工智能的自动化运维管理平台产品完成兼容互认。经过双方团队的严格测试,AntDB数据库与基于人工智能的自动化运维管理平台产品完全兼容,整体运行稳定高效。图1:亚信科技AntDB数据库与优逸派科技完成适配随着我国数字经济建设......
  • React & TS 里面两个实用小技巧
    ❝在工作中我们会经常使用技巧和黑魔法,本篇主要讲两个,希望能帮助到大家!文章内容看情况而定,不一定是React里面专属的!❞TS动态取数据这里其实也不知道起什么标题,具体还是看内容吧。平常做法(JS)在JS中,我经常使用对象去定义数据,然后去获取它,像下面这样//订单状态//只是举个栗子不......
  • React:我们的用法习惯可能是错误的(不优雅)
    React:我们的用法习惯可能是错误的(不优雅)今天学到了2023-01-088,361阅读4分钟 在我们React的日常开发中一些常用的写法,看似运行的很好,实际可能并不优雅。学习React并不是如何如何使用它,而是如何写出优雅,干净的代码。下面举一些例子,总结了一些React开发中不好的写法及相......
  • immerjs:React开发必会技能
    immerjs:React开发必会技能龙骑士尹道长 ​关注 2人赞同了该文章我们都知道React追求的泛式是数据不可变,一般情况下state或者props改变才进入render阶段;如果我们创建的state是一个一般数据类型,他就是一个不可变的值,如果需要改变我们需要重新创建一个state......
  • React Hooks中父组件中调用子组件方法
    import {useState,useImperativeHandle,forwardRef}from 'react';//props子组件中需要接受reflet ChildComp=(props,ref)=>{    //此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用    useImperativeHandle(ref,()=>({      ......
  • CF249E Endless Matrix 题解
    @目录Description前置芝士SolutionCodeDescription构造一类矩形:先构造矩形\(M_1=\begin{bmatrix}1\end{bmatrix}\)。对于\(i\geq1\),\(T_{i+1}\)从\(T_i\)构造而来,方法为在最右侧和最下侧插入新的一行一列,自右上到左下\(2i+1\)个数分别填入\(i^2+1,i^2+2\dots(i+1)^2\)......
  • 竟然可以在一个项目中混用 Vue 和 React?
    React和Vue是前端开发中的两大热门框架,各自都有着强大的功能和丰富的生态系统。然而,你有没有想过,在一个项目中同时使用React和Vue?是的,你没有听错,可以在同一个项目中混用这两个框架!本文就来分享3个用于混合使用React和Vue的工具!#VeauryVeaury是一个基于React和Vue3的工......