项目配置

建立相应的文件夹

在src路径下，方便进行管理

修改icon title

在public/index.html 页面下进行修改
通常logo为ico格式

配置craco

react不知道@是什么，但是react脚手架隐藏了webpack 如何去修改？ 通过craco进行配置

 npm install @craco/craco@alpha

在src下添加 craco.config.js

const path = require('path');
const resolve = pathname => path.resolve(__dirname, pathname);
module.exports = {
    webpack: {
        alias: {
            "@": resolve("src"),
            "components": resolve("src/components"),
            "utils": resolve("src/utils")
        }
    }
}

在webpack里也要进行修改
如果没有path报错，安装一下这个
npm i -D @types/node

    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"

在修改完webpack配置后，项目需要重启才能生效

css样式重置

normalize.css

npm install normalize.css

reset.less

如何引进less文件？
npm i craco-less@2.1.0-alpha.0
const CracoLessPlugin = require('craco-less');
plugins: [ { plugin: CracoLessPlugin } ]

body {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
img {
    vertical-align: top;
}

也可以使用sass进行配置
npm i --save-dev sass

路由配置

安装 npm install react-router-dom
在主文件（index.js）里面引入HashRouter
import { HashRouter } from 'react-router-dom';
之后用HashRouter包裹组件
使用Hooks {useRoutes(routes)}
routes为设置的文件

import React from "react"
import { Navigate } from "react-router-dom";

const Home = React.lazy(()=>import('@/views/home'));
const Entire = React.lazy(()=>import('@/views/entire'));
const Detail = React.lazy(()=>import('@/views/detail'));
const routes = [
    {
        path:'/',
        element: <Navigate to='/home'/>
    },
    {
        path: "/home",
        element: <Home/>
    },
    {
        path:'/entire',
        element: <Entire/>
    },
    {
        path:'/detail',
        element: <Detail/>
    }
]
export default routes

为了防止异步加载无法加载页面，引入Suspense

Redux配置

@reduxjs/toolkit方式
npm install @reduxjs/toolkit react-redux

axios网络请求方法封装

npm install axios

import axios from "axios";
import {BASE_URL, TIMEOUT} from './config'
class BearRequest {
    constructor(baseURL, timeout){
        this.instance = axios.create({
            baseURL,
            timeout
        })
        this.instance.interceptors.response.use((res)=>{
            return res.data;
        }, err=>err);
    }
    request(config) {
        return this.instance.request(config);
    }
    get(config) {
        return this.request({...config, method: "get"});
    }
    post(config) {
        return this.request({...config, method: "post"});
    }
}
export default new BearRequest(BASE_URL, TIMEOUT);