h5(react ts 适配)

一、新建项目并放在码云托管

1、新建项目：react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。

首先，确保你已经安装了 Node.js。如果没有安装，请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。

打开命令行工具，然后执行以下命令来全局安装 create-react-app 脚手架工具：

npm install -g create-react-app
接下来，在命令行中执行以下命令来创建一个新的 TypeScript React 应用程序：

npx create-react-app my-react-app --template typescript
其中，“my-react-app” 是你的项目名称，你可以根据实际情况进行修改。

create-react-app 将会自动创建并初始化一个新的 TypeScript React 项目，并安装所需的依赖包。这个过程可能会花一些时间。

当创建完成后，进入项目目录：

cd my-react-app
最后，运行以下命令启动开发服务器，以预览你的新项目：

npm start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、在码云（gitee）上新建一个仓库

目前为止，项目有了，仓库有了。现在要做的就是把项目放在gitee上进行托管。

3、在项目对应的命令窗口中，依次执行如下命令：

git remote add origin <仓库地址>
git add .
git commit -m "Initial commit"
git push -u origin master
1
2
3
4

但是此时很有可能会报错，拿着报错信息去百度。

二、写代码：

​ 除了我们常见的谷歌浏览器外，在火狐浏览器可以用手机扫码，在手机上查看效果，并且，代码修改中保存后会和效果同步。

三、路由

用react-router、安装之后在app.tsx文件中。

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
。。。
return (
    

      
{ width: `${appMainWidth}px`, height:               `${appMainHeight}px` }}>
        
          
            } />
          
        
      
    
  );
。。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、网络请求，接axios

1、安装、配置axios

import axios from 'axios';

const httpService = axios.create({
    baseURL: '/api', // 设置API的基本URL
    timeout: 10000, // 设置超时时间
    headers: {
        'Content-Type': 'application/json',
    },
});

// 添加请求拦截器
httpService.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    // 可以在这里添加认证信息、loading状态等
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
httpService.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response.data;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default httpService;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在写接口的文件中，就可以调用这个文件中的axios实例啦

import http from './index'

export const getCheckList = (data: any) => {
  return http({
    url: '',
    method: 'post',
    data,
  })
}
1
2
3
4
5
6
7
8
9

五、跨域

前端如何解决跨域

可以在webpack的配置文件(webpackDevServer.config.js)中直接配置代理

// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
    proxy: {
      '/api': {
          target: '', // 后台服务地址以及端口号
          ws: true,
          changeOrigin: true, //是否跨域
          pathRewrite: { '^/api': '/' }
       }
    },
1
2
3
4
5
6
7
8
9

六、项目适配

参考 https://blog.csdn.net/qq_52181663/article/details/134463765?spm=1001.2014.3001.5501