create-react-app是由反应官方提供并推荐使用构建新反应的单页面应用程序的最佳方式,其构建的项目默认是不支持的较少,需要我们手动集成
1,先全局安装create-react-app(提前需要安装节点)
2,然后通过create-react-app创建项目app
3,最后通过cd进入项目文件夹并启动
4,终端出现如下界面表示启动成功,并在浏览器中输入http://localhost: 3000/即可看到反应的初始页面
安装完成之后该怎么配置呢?这时需要通过webpack来配置less-loader,但是我们在上面的目录结构中似乎并没有发现webpack.config。js文件,这是因为脚手架为了实现“零配置”,会默认把一些通用的脚本和配置集成到react-scripts,目的是让我们专注于src目录下的开发工作,不再操心环境配置。同时,被其集成的脚本和配置也会从程序目录中消失,程序目录也会变得干净许多
接下来,我们就需要通过纱线弹射将webpack配置暴露出来
执行纱逐出
提示:执行该命令后会把已构建依赖项,配置文件和脚本复制到程序目录中。该操作是不可逆转的,执行完成后会删除这个命令,也就是说只能执行一次
配置完成之后,我们会发现我们的目录结构中会多出两个文件夹:
其中配置文件夹,有三个关于webpack的配置文件:
-
<李> webpack.config.dev.js开发环境配置李
<李> webpack.config.prod。李js生产环境配置
<李> webpackDevServer.config。js开发服务器配置李
第一步:到webpack.config.dev.js文件中找到如下代码,在sassModuleRegex后面加上lessRegex和lessModuleRegex变量
第二步:在下面加上这两段代码
第三步:按照同样的方法,把webpack.config.prod.js也配置上
1,在src目录中把App.css改为App.less文件,并在里面加上
2,然后再App.js中把少文件导入
3,回到页面刷新,发现字体变红,说明配置成功
antd:是蚂蚁金服推出的一个很优秀的反应UI库,其中包含了很多我们经常使用的组件,对于小白学习来反应说十分友好!
1,首先需要安装antd
2,安装完成之后我们就可以直接在代码里使用它的ui组件了
这个方法的优点是比较简单,不需再次配置,直接加载即可,但是比较麻烦,每次载入一个新的组件都需要先载入组件,再加载组件的css文件,性能较差
3,使用babel-plugin-import来进行按需加载
