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.git

npm 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

 有具体的项目地址，如有需要可相互交流