---

创建react+ts项目

创建好后进入react_ts目录npm i 安装依赖

// 固定写法，可单独创建    名字          模板      react+ts
npm create vite@latest react_ts -- --template react-ts

安装Ant Design Mobile移动端组件库

npm install --save antd-mobile//使用 直接引入即可
import { Button } from 'antd-mobile'

安装路由

npm i react-router-dom

src下创建router/index.tsx

import { RouteObject, createBrowserRouter } from "react-router-dom";
import Device from "@/components/Device";
import Home from "@/components/Home";
const routers: RouteObject[] = [{path: "/",element: <Home />}, {path: "Device",element: <Device />}
]
const router = createBrowserRouter(routers)
export {router
}

main.tsx 使用RouterProvider绑定router路由

// import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { RouterProvider } from "react-router-dom";
import { router } from "./router/index.tsx";
ReactDOM.createRoot(document.getElementById('root')!).render(// <React.StrictMode><RouterProvider router={router} />// </React.StrictMode>,
)

配置@别名

• 安装node，ts不支持node,所以要安装插件配置

npm i @types/node -D

• vite.config.ts 加入resolve配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 需要安装@types/node
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],// 别名配置resolve:{alias:{"@":path.resolve(__dirname,"./src")}}
})

• tsconfig.json 加入compilerOptions下的配置，别名就配置成功了

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]},},"include": ["src"],"references": [{ "path": "./tsconfig.node.json" }]
}

安装aixos

npm i axios -D

配置

请求拦截配置token头部，响应拦截处理数据传递

import axios from "axios";const httpInstance = axios.create({baseURL:"http://localhost:8081",timeout:5000
})// 请求拦截器
httpInstance.interceptors.request.use((response)=>{const res =responsereturn res},(error)=>{return Promise.reject(error)}
)// 响应拦截器
httpInstance.interceptors.response.use((response)=>{const res =responsereturn res},(error)=>{return Promise.reject(error)}
)export {httpInstance as http
}

封装

/src/api/index.ts

这个文件还可以把接口类型定义和泛型单独封装

import { http } from "@/utils/http";// 定义泛型
type ResType<T> = {code:numbermassage:stringdata:T
}// 定义接口类型
export  type ChannelItem = {key:stringtitle:string,List:{title:string}[]
}// 
type ChannelRes ={list:ChannelItem[]
}export const fetchChannelAPI = ()=>{return http.request<ResType<ChannelRes>>({url:"/data"})
}