当前位置：首页 > news >正文

h5(react ts 适配)

news 2025/8/8 21:55:23

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

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

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

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

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

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

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

二、写代码：

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

三、路由

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

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
。。。
return (<div id='app'><div className='app-main' style={{ width: `${appMainWidth}px`, height:               `${appMainHeight}px` }}><Router><Routes><Route path="/check" element={<Check />} /></Routes></Router></div></div>);
。。。

四、网络请求，接axios

1、安装、配置axios

import axios from 'axios';const httpService = axios.create({baseURL: '/api', // 设置API的基本URLtimeout: 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;

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

import http from './index'export const getCheckList = (data: any) => {return http({url: '',method: 'post',data,})
}

五、跨域

前端如何解决跨域

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

// `proxy` is run between `before` and `after` `webpack-dev-server` hooksproxy: {'/api': {target: '', // 后台服务地址以及端口号ws: true,changeOrigin: true, //是否跨域pathRewrite: { '^/api': '/' }}},