vite+react+antd+axios novice building tutorial

Publish a wave of articles on the first day

The first step is to go to the official website of Vite to download the frame.

Vite | The next generation of front-end toolchain

Open cmd and run the command to download the project

npm create vite@latest

The first requirement is the name of the project

The second one is to choose the front-end language framework. I chose react here. As a reminder, the first item is a version of vue2, the second item is a version of vue3, and the third item is react.

Third, it depends on the individual whether to choose ts or js. I chose ts here.

Download is complete, then enter this project

 Then there are the familiar download dependencies

npm install  

npm install --save-dev @types/node //安装@types/node

npm install node-sass //安装sass

npm install antd //安装antd ui框架

npm install react-router-dom //安装路由

npm install axios //安装axios

 The second step is to build the framework

First go to the  vite.config.ts file

import { defineConfig} from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import type { UserConfig, ConfigEnv } from "vite";

export default ({ command, mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [react()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"), // 为./src配置别名，以后可用@引入文件
      },
    },
    //配置跨域的地方
    server: {
      port: 8516,//端口号
      host: true,
      open: false,//是否自动启动
      proxy: {
        "/api": {
          target: '127.0.0.1',
          changeOrigin: true, //是否跨域
          rewrite: (p) => p.replace(/^\/api/, "api"), //重写路径
        },
      },
    },
  };
};

 Then  the tsconfig.json file

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    /* 需要加的东西 */ 
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    /* 需要加的东西 */ 
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 Then the basic things are almost done, let’s start building the routing

The third step is to build a route

 1. Go to the src/main.tsx file first

import { BrowserRouter} from 'react-router-dom' //引入路由
import ReactDOM from 'react-dom/client' //引入路由
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   //<React.StrictMode></React.StrictMode>替换成<BrowserRouter></BrowserRouter>
  <BrowserRouter> 
    <App />
  </BrowserRouter>
)

2. Go to the src/App.tsx file, delete all the content inside, and copy all my code into it. Maybe the second line of code will report an error because the file is not there yet, so it cannot be found.

import { useRoutes } from "react-router-dom" //引入路由
import router from './router/index' //引入路由，自己写的
function App() {
  const Router = () => useRoutes(router)
  return (
    <div>
      <Router/>
    </div>
  )
}

export default App

3. Next create the route r folder under src , and then create an index.tsx file under the router folder . Note that it must be a tsx file and not a ts file. Go to src to create the views folder, and then create tsx in it. document!

import Home from "../views/home/index.tsx"; //引入tsx文件
import Loding from "../views/loding/index.tsx"; //引入tsx文件
import HomePage from "../views/homePage/index.tsx" //引入tsx文件
import Index from "../views/index.tsx" //引入tsx文件

const router = [
    {
        path:'/login',
        element: <Loding />
    },
    {
        path:'/',
        element: <Index />,
        children:[
            {
                path:'/',
                element: <HomePage />,
            }
        ]
    }
]
export default router

4. Then put the router file in which we just defined a route , right? The  path inside it: "/" is  a default page when starting up. Here it corresponds to the <index /> tsx file, so we need to go to <index /> Perform an operation on the file where it is located, and its corresponding page is in views/index.tsx. You cannot create it yourself, and the views folder cannot be created by yourself!

Code in views /index.tsx

import { Outlet } from "react-router-dom"

function Index(){
    return <div className="systemSubject">
        <Outlet />
    </div>
}
export default Index

Then you're done

Note: There is also a path:'/' in the children array of the second object. One meaning I understand is that when we start the project, open the browser, first enter the <Index /> page, and then <Index /> Then render the <HomePage /> page through the <Outlet /> tag. All routing pages are rendered through <Outlet />, so generally speaking, bind a class externally to this <Outlet /> and set the width for it. The high settings are set to 100vw and 100vh respectively, and then dynamic routing is implemented. I will talk about the rest next time. I will return from work at 6 o'clock.