使用vite创建react项目并进行初始化（仓库、路由、封装）

前言

学的时候都是跟着教程进行创建，后面发现自己写项目的时候记不住需要做什么，所以现在写一篇来给自己总结一下。（后面忘了也不用翻视频了，直接照着抄答案）

只写流程，没有理论。

这是我写的习惯，只具备一定通用性，有需要可参考。

创建项目

npm create vite@latest HireSphere
npm install 
npm run dev

HireShere是我的项目名，首先用它快速创建，然后选择js（这次用的是js）。

刚开始src下面会有很多东西，不管，全部删掉，只要留下这几个就行。（还有assets文件夹）

后续所有创建都是在src文件夹下。

路由

npm install react-router-dom

首先npm进行下载，然后新建router文件夹和router.jsx。

这里用的是Browserhistory，就是没有#的那个。

import { createBrowserRouter, Navigate } from 'react-router-dom'
import Login from '../pages/Login'
const routers = [
    {
        path: '/',
        element: <Navigate to="/login" replace />
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/home',
        element: <div>home</div>
    }
]

export default createBrowserRouter(routers)

大部分的项目都是有登录页的，就直接用/login测试了。加了一个如果是'/'就自动重定向到/login。

element这里组件名字需要大写字母开头。

当然直接/home这种测试也没问题。

然后就是在app.jsx进行引入。

import './App.css'
import routers from './router'
import { RouterProvider } from 'react-router-dom'
function App() {

  return (
      <RouterProvider router={routers}></RouterProvider>
  )
}

export default App

这样路由就解决了。

apis

现在的项目一般都是将api放在一个文件，基本都是会对axios进行封装的。

npm install axios

新建一个api文件夹和api.js、utils.js

在util.js下

//utils.js
import axios from "axios"
axios.defaults.baseURL='http://127.0.0.1'
const axiosInstance = axios.create({
    timeout: 5 * 1000, // 请求超时时间（5秒）
    retry: 0, //全局重试次数
    retryDelay: 1000 //全局重试间隔
})

export const request = (options) => {
    return new Promise((resolve, reject) => {
        axiosInstance(options)
            .then((response) => resolve(response.data))
            .catch((error) => reject(error))
    })
}

然后在api.js下引入就好

//api.js
import { request } from "./utils";
export const login = (data) => {
    return request({
        url: '/login',
        params: data,
        method:'GET'
    })
}

仓库

npm install @reduxjs/toolkit
npm install react-redux

创建store文件夹,index.js和reducers文件夹。大概就是这种结构。

在user.js中写下面内容（大部分项目都是需要token的，就用token和id举例子）。

import { createSlice } from "@reduxjs/toolkit";
const UserSlice=createSlice({
    name:'user',
    initialState:{
        id:'',
        token:''
    },
    reducers:{
        changeId:(state,action)=>{
            state.id=action.payload
        },
        changeToken:(state,action)=>{
            state.token=action.payload
            localStorage.setItem('token',action.payload)
        }
    }
})
export const {changeId,changeToken}=UserSlice.actions
export default UserSlice.reducer

然后在index.js中导出。

import { configureStore } from "@reduxjs/toolkit";
import UserReducer from './reducers/user'
export default configureStore({
    reducer:{
        UserReducer
    }
})

接着在main.jsx导入。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import store from './store/index.js'
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>

  </React.StrictMode>,
)

如何使用这些数据呢？这里举个例子，还是用登录页。

import { useSelector, useDispatch } from "react-redux"
import { changeId } from '../../store/reducers/user';//方法
//登录页
const Login = () => {
    const id = useSelector(state => state.user.id)
    const dispatch = useDispatch();
    dispatch(changeId(123));//修改
    console.log(id)
    return (
        <div>
            这个是Login
        </div>
    )
}
export default Login

创建其他文件夹

最基本的大框架已经是搭建好了，剩下大家各自发挥了，都是创建文件夹的事情。

这个是我的个人习惯。