vite+react+antd+axios小白搭建教程

第一天发布水一波文章先

第一步，先去vite官网拉套框架下来先

Vite | 下一代的前端工具链

打开cmd运行命令，下载项目

npm create vite@latest

第一个要求输入的是这个项目的名字

第二个，是选择前端语言框架 我这边选择的是react，这里提示一下，第一项是vue2的一个版本，第二项是vue3的一个版本，第三项是react

第三个，选择ts还是js这个看个人，我这边选择的是ts

下载完成，然后进入这个项目

 然后就是熟悉的下载依赖

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

 第二步 搭建框架

先去 vite.config.ts 文件

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"), //重写路径
        },
      },
    },
  };
};

 然后 tsconfig.json 文件

{
  "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" }]
}

 然后基本的东西都差不多弄好了，开始搭建路由

第三步 搭建路由

 1.先去 src/main.tsx 文件

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.去src/App.tsx 文件，然后把里面内容全删，把我代码全复制进去，也许第二行代码会报错，因为还没这文件，所以会找不到

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.接下来在src下创建router的文件夹，然后在router文件夹下创建一个index.tsx文件，注意一定是tsx文件不是ts文件，自己去src创建views文件夹，然后在里面再创建tsx文件！

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.然后把刚刚我们定义一个路由的一个router文件是吧，里面这个 path:"/"  启动时的一个默认页面，这里他对应的<index /> 这个tsx文件，所以我们要去<index />所在文件进行一个操作，他对应的页面在views/index.tsx，没有可自己创建，views文件夹也是没有自己去创建！

在views/index.tsx中的代码

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

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

然后大功告成

注：第二个对象里面children数组里面也有一个path:'/',我理解的一个意思啊就是，我们启动项目了，打开浏览器了，先进入<Index />页面先，然后<Index />再通过 <Outlet />标签 把 <HomePage />页面渲染出来，所有的路由页面都是通过<Outlet />渲染出来，所以一般的话，把这个<Outlet />外部绑定一个class然后给他设置宽高分别设置为100vw,100vh，然后动态路由就实现了，剩下下次再讲，6点下班返归