create-react-app创建项目
- 1.先创建一个react目录 create-react-app + 项目名称
$ create-react-app my-react-app
- 2.进入新建的文件目录 cd 项目名称
// 下列操作都是在master分支下进行配置的，如果你的当前目录还不是一个git仓库，那你需要先git init一下哟
// 之所以要在master分支下进行配置，是为了在下文中运行 npm run eject
$ cd my-react-app
- 3.查看react-scripts版本，可以看到
$ cat package.json
-
4.在package.json中删除下列注释代码，不能直接注释。
在这里插入图片描述
react-scripts降级
之所以要进行react-scripts降级是因为它只兼容IE11以上，所以为了更好地兼容IE浏览器，我们需要做降级配置
- 1.先本地删除
$ npm uninstall react-scripts -S
- 2.安装稳定的低版本
$ npm i react-scripts@1.x -S
- 3.git add,git commit 提交更改的文件
$ git add -A
$ git commit -m 'message'
- 4.运行eject(注意：这是一个不可逆的操作)
$ npm run eject
- 5.npm start 看是否能运行
$ npm start
// 如果不能运行，先将node-mpdule文件夹删除，再npm install安装，安装完成后再npm start
less配置
- 1.安装less
$ npm install less less-loader -S
- 2.配置webpack的less loader
-
config文件夹中的webpack.config.dev.js文件中的css代码复制一份然后将css改为less
在这里插入图片描述 - 这里是已经改过的样子
- 在use的options里添加下列代码
// javascriptEnabled:true -
在这里插入图片描述
- webpack.config.prod.js文件重复上述步骤(先复制prod文件中的css代码，再更改添加上方的代码)
- 配置完毕重启生效
- 检查less是否成功可以新建一个less文件，并在APP.js文件中引入，看样式是否生效
配置antd
- 1.安装antd
$ npm install antd -S
- 2.安装按需加载组件代码和样式的插件
$ npm install babel-plugin-import -S
- 3.在package.json的babel中配置（注意要在babel中进行配置，不要写在babel外面去了）
"plugins":[
["import",{"libraryName":"antd","style":true}]
]
在这里插入图片描述
- 配置完成后需重启生效
- 检查是否配置成功，引入antd的任意组件，看是否生效
- 最后建议npm run build一下看看是否会报错哟
补充
- 安装路由
$ npm install react-router-dom -S
- 引入按需加载
$ npm install react-loadable -S
