Vite+React配置

首先·安装Vite:

   

     npm create vite@latest vite-react --template react  

//vite-react是项目名称，template 后的react是安装react  回车会出现选项

选择我们需要的框架  React

 

 选择我们需要的语言

 

安装  node_models : npm i 

已经可以运行了 ：npm run dev

插件配置：

npm install -D less Sass          //安装 less Sass
npm i react-router-dom           //react 路由
npm install react-redux --save  // redux 
npm install @reduxjs/toolkit   //  toolkit

 

一些基本配置我就不多说了。。。。。

路由配置

        此文件下配置

         

import React from "react";
import ReactDOM from "react-dom/client";
import router from "./router/index.jsx";
import { RouterProvider } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store/index.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

路由router文件

import {createBrowserRouter} from "react-router-dom"
import App from "../App.tsx"
const router=createBrowserRouter([
    {
        path:"/",
        element:<App/>,
        children:[
            
            
        ]
    }
])
export default router

store状态管理库：

import {createSlice} from "@reduxjs/toolkit"
const cart=createSlice({
    name:"cart",
    initialState:{
        cart:[]
    },
    reducers:{
        AddShop(state,{payload:value}){
            console.log(value,"你的story")
            state.cart.push(value)
        }
    }
})

export const {AddShop} =cart.actions

export default cart

import { configureStore } from "@reduxjs/toolkit"

import cart from "./Chart/chart.jsx"
const store=configureStore({
    reducer:cart.reducer
})

export default store

react使用就看这里的吧：react基本使用