react+routerv6搭建项目
目标配置：React + Hook + React-router-v6 + Mobx + AntD；
1.创建项目
npx npx create-react-app 项目名称
2.安装sass环境，react默认配置了sass环境，所以只需要下载就可以使用，当然你也可以选择less，选择less就需要自己配置环境了
yarn add sass
3.安装react-router-dom ，默认安装的就是v6版本，最好使用yarn，因为其他的命令可能是我本地配置的原因，经常出现问题
yarn add react-router-dom
4.组件库安antd装 (mac请使用sudo，不然容易出现失败)
sudo yarn add antd
在index.js中引入css，请使用min.css,否则会出现提示
import 'antd/dist/antd.min.css';
5.配置别名路径，使用@
两种方式，
方式一：通过执行 yarn eject 命令，释放 react-scripts 的所有配置项
方式二：通过第三方库：比如，@craco/craco
1,yarn add -D @craco/craco
2,在项目根目录下创建craco.config.js并配置路径别名
3,修改 package.json 中脚本命令
4,在代码中，就可以通过@来表示src目录的绝对路径、
5,重启后生效
craco.config.js 内容
// 添加自定义的webpack配置
const path=require("path");
module.exports={
webpack:{
//配置别名
alias:{
// 约定：使用@表示src文件所在路径
"@":path.resolve(__dirname,"src")
}
}
}
package.json 修改内容
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
配置别名@后的路径提示
在根目录下创建jconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*":["src/*"]
}
}
}
6. 调试工具 dev-tools工具安装
方式一：下载后直接拖到谷歌浏览器的插件里面即可，下载地址如下
https://gitee.com/react-cp/react-pc-doc
方式二：自己下载git，然后通过-》加载已解压的扩展程序，添加扩展插件
git clone https://github.com/vuejs/vue-devtools.gitnpm install
npm run build
打开目录 vue-devtools/shells/chrome 引入即可
以上如果还搞不定，请联系我查看视屏教程：
7.axios安装及使用
sudo yarn add axios
创建utils/http.js文件
内容如下
// 封装axios
// 实例化
// 请求拦截器
// 响应拦截器
import axios from "axios"
const http=axios.create({
baseURL:"http://localhost:7001",
timeout:5000
})
// 添加请求拦截器, 可以在config中对token进行处理
http.interceptors.request.use((config)=>{
return config
},(error)=>{
return Promise.reject(error)
})
// 添加响应拦截器
http.interceptors.response.use((response)=>{
// 2xx 范围内状态码都会触发该函数
// 对响应数据做点什么
return response
},(error)=>{
// 超出2xx范围的状态码都会触发该函数
// 对响应错误做点什么
return Promise.reject(error)
})
export {http}
在utils/index.js中导出，进行统一管理
import {http} from "./http"
export {
http
}
8.mobx状态管理
sudo yarn add mobx mobx-react-lite
有具体的项目地址，如有需要可相互交流
