🍁 作者:知识浅谈,CSDN签约讲师,CSDN博客专家,华为云云享专家,阿里云专家博主 📌 擅长领域:全栈工程师、爬虫、ACM算法
🤞react项目的创建到可以编写业务的一些列初始化🤞
npx create-react-app 项目名
创建项目npm install react-router-dom
安装路由npm install sass -D
安装sassnpm install antd --save
安装antDesignnpm install axios
安装url请求依赖npm install react-redux @reduxjs/toolkit
安装reduxrouter->index.js 中添加代码
import {createBrowserRouter} from "react-router-dom";
import Layout from "../pages/Layout";
import Login from "../pages/Login";
const router = createBrowserRouter([
{
path:'/',
element:<Layout/>
},
{
path:'/login',
element:<Login/>
}
])
export default router
根目录中的index.js中引入路由
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {RouterProvider} from 'react-router-dom'
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}/>
</React.StrictMode>
);
看我上一篇文章:React系列:配置@别名路径并配置联想
在gitee上自己创建仓库 ,在自己电脑上配置ssh key,(网上找一个配置过程 或者 找我之前的文章看一下)
utils->request.js
//axios 封装处理
import axios from "axios";
//根域名配置 超时时间 请求拦截器 响应拦截器
const request = axios.create({
baseURL:'',
timeout:5000,
})
// 请求拦截器
request.interceptors.request.use((config)=>{
return config
},(error)=>{
return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use((result)=>{
//2xx 范围内的状态码都会出发该函数
return result.data
},(error)=>{
// 其他响应的状态码
return Promise.reject(error)
})
export {request}
utils->index.js
// 统一中转模块函数
import {request} from './request'
export {
request
}
上边的环境准备好就可以开始后续的业务开发工作。
大功告成,撒花致谢🎆🎇🌟,关注我不迷路,带你起飞带你富。