react+routerv6搭建项目
2024-10-21 03:28:18
目标配置: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
有具体的项目地址,如有需要可相互交流
最新文章
- 【bzoj4513】储能表【数位DP】
- 转一篇老外写的博文:Android automated testing (Robotium)
- mongo链接报错:couldn't connect to server 127.0.0.1:27017 (127.0.0.1)
- hdu Train Problem I
- 16进制转rgb
- VS2010数据库连接问题
- Ruby on Rails Session 1: How to Build a Ruby on Rails on the Ubuntu.
- 常用LINUX脚本汇总(1)
- JavaScript类的设计
- WPF中当鼠标移到按钮上时,按钮的背景图片消失的问题
- linux C语言处理正则表达式
- JS获取前天、昨天、今天、明天、后天的时间
- 轮评审用例,写用例的重要性-----(python单元测试反思)
- word20170108逛景点 Sightseeing有用的词和句子
- 《剑指offer》平衡二叉树
- 如何去掉wordpress后台notice提示窗口
- Cs231n课堂内容记录-Lecture 3 最优化
- mui 下拉刷新和上拉加载
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App):3. 随机颜色及清除按钮
- JavaScript重点知识(二)
热门文章
- Java解题练习
- 题解P3847 [TJOI2007]调整队形
- ac自动姬
- Ubuntu 22.04 安装搜狗输入法
- 连接KingbaseES异常,致命错误/ 用户";system"; Password 认证失败(kbjdbc/autodetected server-encoding to be GB2312...)
- vscode 配置复盘
- 【Oculus Interaction SDK】(七)使用射线进行交互(物体 &; UI)
- 项目与自身毕设对比整理规划6 330 done
- 固定SRAM地址变量
- Mockito单元测试 初试