- 全局安装
npm install -g create-react-app - 创建项目
create-react-app 项目名
等一会儿。。。

创建成功 - 查看项目

- 暴露webpack配置文件(暴露配置文件的目的是增加自己想要增加的依赖。)
npm run eject

操作成功。 - 增加less
修改配置文件:(注意cra的版本,2.1.8之前的暴露配置文件时会有开发和生产两个,之后只有一个webpack.config.js文件)npm install less-loader less --save-dev


修改完俩个地方,保存。npm run start 重启(gitBash用ctrl+c不能关掉当前服务,需要在任务管理器关掉node服务,然后重启)。
测试效果:
- 在src目录下创建App.less文件 并修改App.js中的引用。(css --> less)
- 拷贝App.css的内容到App.less
- 将background-color: #282c34 改为background-color: red;
- ctrl+S保存,打开页面,哇辣眼睛的红色,就可以了。 - 增加antd
babel-plugin-import 使得antd按需加载。npm install antd babel-plugin-import --save-dev
修改package.json文件

保存,重启项目。 - 未完待续。。。
create-react-app使用记录
本文详细介绍了使用Create-React-App快速搭建React项目的过程,并深入探讨了如何暴露Webpack配置文件,以便于自定义项目的构建设置。同时,文章还讲解了如何引入LESS预处理器和Ant Design UI库,以及进行相应配置的方法。

被折叠的 条评论
为什么被折叠?



