使用create-react-app构建react+ts+proxy项目

李宝龙。

已于 2023-11-23 13:35:22 修改

阅读量271

点赞数 1

文章标签： react.js javascript 前端

于 2023-11-22 16:11:21 首次发布

本文链接：https://blog.csdn.net/apple_52225781/article/details/134554914

版权

一、create-react-app脚手架

1.依赖安装create-react-app

npm install -g create-react-app
//或是
yarn add -g create-react-app

2.创建支持TS的create-react-app项目

create-react-app my-app --template typescript

3.删除多余文件

4.暴露webpack文件

react项目默认隐藏了webpack相关配置文件，如果想要暴露在项目当中，需要执行npm run eject,并且此操作无法回退，此操作根据自行需要执行；如果报错需将其之前操作后的提交至远程仓库即可暴露webpack文件

5.在项目中使用less

安装：

npm install less less-loader --save-dev

在config文件夹下配置webpack.config.js文件

首先找到添加以下代码后

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

往下找到

在其后面进行less配置复制粘贴即可

 {

              test: lessRegex,

              exclude: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                },

                'less-loader'

              ),

              // Don't consider CSS imports dead code even if the

              // containing package claims to have no side effects.

              // Remove this when webpack adds a warning or an error for this.

              // See https://github.com/webpack/webpack/issues/6571

              sideEffects: true,

            },

            // Adds support for CSS Modules, but using SASS

            // using the extension .module.scss or .module.sass

            {

              test: lessModuleRegex,

              use: getStyleLoaders(

                {

                  importLoaders: 2,

                  sourceMap: isEnvProduction && shouldUseSourceMap,

                  modules: true,

                  getLocalIdent: getCSSModuleLocalIdent,

                },

                'less-loader'

              ),

            },

6.安装配置路由

npm i react-router-dom

进入index.tsx引入并注册路由

import { BrowserRouter } from 'react-router-dom'

 <BrowserRouter>
          <App />
    </BrowserRouter>

在src下新建pages文件夹创建两个路由组件例如(Home About)；新建routes文件夹，创建index.tsx文件用于存放路由表，引入路由组件并且向外暴露，就像下面这样：

//routes 下面的index.tsx
import { Navigate } from 'react-router-dom';
import React, { Component ,lazy} from 'react';
const About = lazy(() => import('../pages/About/index'));
const Home = lazy(() => import('../pages/Home/index'));


export default [
    { path: '/home', element: <Home /> },
    { path: '/about', element: <About /> },
    { path: '/', element: <Navigate to="/about" /> } //路由重定向
]

引入Ant-Design组件库

npm install antd --save

将以下代码复制粘贴到App.tsx中

import React, { useState } from 'react'
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Layout, Menu, theme } from 'antd'
import { useNavigate, useRoutes } from 'react-router-dom'
import routes from './routes/index'
const { Header, Content, Sider } = Layout

const titleMenu: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
  key,
  label: `标题 ${key}`,
}))

const siderMenu: MenuProps['items'] = [
  {
    key: 'home',
    icon: <UserOutlined />,
    label: '人员管理',
  },
  {
    key: 'about',
    icon: <NotificationOutlined />,
    label: '关于系统',
  },
  {
    key: 'info',
    icon: <LaptopOutlined />,
    label: '信息管理',
    children: [
      {
        key: 'info-detail',
        label: '信息详情',
      },
      {
        key: 'info-look',
        label: '信息查询',
      },
    ],
  },
  {
    key: 'statistics',
    icon: <NotificationOutlined />,
    label: '数量统计',
  },
]

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken()
  // 获得路由表
  const routeView = useRoutes(routes)
  const navigate = useNavigate()
  // 面包屑名称
  const [breadcrumbName, setBreadcrumbName] = useState('home')
  // 点击菜单
  const handleSiderClick: MenuProps['onClick'] = ({ key, keyPath }) => {
    const name = keyPath.reverse().join('/') || ''
    setBreadcrumbName(name)
    if (key !== 'home' && key !== 'about') return
    // 路由跳转
    navigate(key, {
      replace: false,
      state: {
        id: key,
      },
    })
  }

  return (
    <Layout>
      <Header className='header'>
        <div className='logo' />
        <Menu
          theme='dark'
          mode='horizontal'
          defaultSelectedKeys={['1']}
          items={titleMenu}
        />
      </Header>
      <Layout>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode='inline'
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
            items={siderMenu}
            onClick={handleSiderClick}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <div style={{ margin: '16px 0' }}>{breadcrumbName}</div>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            {routeView}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default App

语言汉化

使用ConfigProvider包裹App根组件

import { ConfigProvider } from 'antd';
// 语言汉化
import zhCN from 'antd/locale/zh_CN';


root.render(
  <React.StrictMode>
    <BrowserRouter>
      <ConfigProvider locale={zhCN}>
          <App />
      </ConfigProvider>
    </BrowserRouter>
  </React.StrictMode>
)

/src/index.tsx完整代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.less'
import App from './App'
import { ConfigProvider } from 'antd'
// 语言汉化
import zhCN from 'antd/locale/zh_CN'
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <ConfigProvider locale={zhCN}>
          <App />
      </ConfigProvider>
    </BrowserRouter>
  </React.StrictMode>
)

7.使用proxy进行反向代理

npm install http-proxy-middleware --save

安装完http-proxy-middleware后在src下创建setupProxy.ts文件

const { createProxyMiddleware:proxy } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use('/api', proxy({
        target: '后台服务器地址',//后台服务器地址
        secure: false,
        changeOrigin: true,
        pathRewrite: {
            "^/api": "",
        },
    }))


};

在src下新建文件夹api后新建文件index.ts和request.ts

index.ts

import service from "./request";

export function CameraMath(payload = {}) {
    return service.post('/api/data-api/video/info/update/srs/stream/activity', payload);
}
export function Assengertrace(userId:any) {
    return service.get(`/cailingjian/passenger-trace/${userId}`);
}

request.ts

//导入 axios
import axios from "axios";
 
//实例化axios
var service  = axios.create({
    timeout: 10*1000, //超时时间
    baseURL:''   //基准路径,可以省略重复前缀
})
 
//设置请求拦截器
service.interceptors.request.use(
    (config)=>{
        //添加请求头参数
        config.headers['token'] = '';
        return config;
    },
    (error)=>{
        return Promise.reject(error)
    }
)
//设置响应拦截器
service.interceptors.response.use(
    (res)=>{
        return res;
    },
    (error)=>{
        return Promise.reject(error)
    }
)
 
export default service;

参考

https://blog.csdn.net/qq_52569656/article/details/130602732?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-8-130602732-blog-132763194.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-8-130602732-blog-132763194.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=9