01-项目初始化

1. 初始化

npm create vite@latest react-jike-mobile -- --template react-ts

1. 安装依赖包

npm i

2. 清理项目目录结构

2. 安装antd-mobile

npm install --save antd-mobile

1. 测试组件

import { Button } from 'antd-mobile'

function App() {
  return (
    <>
      <Button>click me </Button>
    </>
  )
}

export default App

3. 初始化路由

1. 安装路由

npm i react-router-dom

2. 配置基础路由

const List = () => {
  return <div>this is List</div>
}

export default List

const Detail = () => {
  return <div>this is Detail</div>
}

export default Detail

import { createBrowserRouter } from 'react-router-dom'
import List from '../pages/List'
import Detail from '../pages/Detail'

const router = createBrowserRouter([
  {
    path: '/',
    element: <List />,
  },
  {
    path: '/detail',
    element: <Detail />,
  },
])

export default router

import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router/index.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
)

4. 配置路径别名

1. 修改vite配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

2. 安装node类型包

npm i @types/node -D

3. 修改tsconfig.json文件

{
  "baseUrl": ".",
  "paths": {
    "@/*": [
      "src/*"
    ]
  },
}

5. axios安装配置

1. 安装axios

npm i axios

2. 简易封装

import axios from 'axios'

const requestInstance = axios.create({
  baseURL: 'http://geek.itheima.net/v1_0',
  timeout: 5000,
})

requestInstance.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

requestInstance.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default requestInstance

import requestInstance from './http'

export { requestInstance as http }

6. API模块测试使用

1. 封装泛型

获取-所有频道列表 - 黑马前端

export type ResType<T> = {
  message: string
  data: T
}

2. 封装请求函数

import { http } from '@/utils'
import type { ResType } from './shared'

type ChannelRes = {
  channels: { id: number; name: string }[]
}

export function fetchChannelAPI() {
  return http.request<ResType<ChannelRes>>({
    url: '/channels',
  })
}

3. 测试API函数

fetchChannelAPI().then((res) => {
  console.log(res.data.data.channels)
})