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

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': '/' }}},

六、项目适配

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/145553.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3 + ts项目(无vite)报错记录

记录项目创建后遇到的报错 1.类型“Window & typeof globalThis”上不存在属性“_CONFIG”。ts(2339) 问题描述&#xff1a; 使用全局 window 上自定义的属性&#xff0c;TypeScript 会报属性不存在 解决&#xff1a;需要将自定义变量扩展到全局 window 上&#xff0c…

word文档转换为ppt文件,怎么做?

大家是否会遇到需要将word文档转换为ppt文件的情况&#xff1f;除了反反复复粘贴复制以外&#xff0c;还有其他方法可以转换文件格式&#xff0c;今天给大家分享word转换ppt方法。 首先我们先将word文件打开大纲模式 然后我们将文中的大标题设置为1级标题&#xff0c;副标题设…

服务器集群配置LDAP统一认证高可用集群(配置tsl安全链接)-centos9stream-openldap2.6.2

写在前面 因之前集群为centos6&#xff0c;已经很久没升级了&#xff0c;所以这次配置统一用户认证也是伴随系统升级到centos9时一起做的配套升级。新版的openldap配置大致与老版本比较相似&#xff0c;但有些地方配置还是有变化&#xff0c;另外&#xff0c;铺天盖地的帮助文…

已安装的nginx追加ssl模块

Nginx开启SSL模块1 切换到源码包&#xff1a; cd /usr/local/src/nginx-1.11.3 2 查看nginx原有的模块 /usr/local/nginx/sbin/nginx -V 在configure arguments:后面显示的原有的configure参数如下&#xff1a; –prefix/usr/local/nginx --with-http_stub_status_module …

C/C++高频面经-秋招篇

自己在秋招找工作过程中遇到的一些C/C面试题&#xff0c;大中小厂都有&#xff0c;分享出来&#xff0c;希望能帮到有缘人。 C语言 snprintf()的使用 函数原型为int snprintf(char *str, size_t size, const char *format, …) 两点注意&#xff1a; (1) 如果格式化后的字符…

对于koa中间件的理解

洋葱模型 大家都知道koa是洋葱模型&#xff0c;先一层一层通过next往下&#xff0c;之后再回去执行next后面的内容&#xff0c;next即使没写&#xff0c;最后也会进入下一个中间件。 那么什么是ctx呢&#xff0c;ctx顾名思义就是上下文&#xff0c;也就是上一层传给下一层的东…

【广州华锐互动】消防安全宣传知识3D交互展示提升公众学习沉浸感

随着科技的快速发展&#xff0c;我们的生活与工作环境愈发复杂&#xff0c;火灾风险也随之提高。为了提高公众的消防灭火能力&#xff0c;普及消防安全知识&#xff0c;广州华锐互动开发了消防安全宣传知识3D交互展示系统。 这是一种全新的教育方式&#xff0c;它利用3D技术&am…

【EI会议征稿】第三届图像,信号处理与模式识别国际学术会议(ISPP 2024)

第三届图像&#xff0c;信号处理与模式识别国际学术会议&#xff08;ISPP 2024) 2024 3rd International Conference on Image, Signal Processing and Pattern Recognition&#xff08;ISPP 2024&#xff09; 第三届图像&#xff0c;信号处理与模式识别国际学术会议&#xf…

WPF的总体架构、类对象结构介绍

一、WPF总体结构 Windows Presentation Foundation (WPF) 是 Microsoft .NET Framework 的一部分&#xff0c;用于构建丰富的桌面应用程序。它提供了一种统一的编程模型&#xff0c;用于构建现代的用户界面。 以下是 WPF 的主要组件和其关系&#xff1a; PresentationFramewo…

Cow Lineup S——离散化、单调队列、双指针

题目描述 思路 x、id不大于1亿&#xff0c;数据量太大&#xff0c;使用离散化将id离散化成一串从1开始连续的编号&#xff0c;使用map集合进行离散化使用双指针维护一段区间&#xff0c;这段区间满足每个编号都包含 如何使用map集合进行离散化&#xff1f; 维护一个变量nums…

工业镜头中的远心镜头与普通镜头的光路

普通镜头&#xff1a; 主光线与镜头光轴有角度&#xff0c;工件上下移动时&#xff0c;像的大小有变化。 FOV&#xff1e;镜头前端直径。 物方远心镜头&#xff1a; 物方主光线平行于光轴&#xff0c;物距发生改变时&#xff0c;像高不会发生改变&#xff0c;测得的物体尺寸大…

Redis缓存穿透、击穿、雪崩

一、Redis的缓存穿透 1.什么是缓存穿透&#xff1f; 缓存穿透是指&#xff1a;客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这时缓存就永远不会生效&#xff0c;这些请求都打到数据库从而导致数据库压力过大。 2.出现缓存穿透的解决方案&#xff0c;以下是常用的两…

redis运维(五)再探redis

一 redis概述 ① redis简介 redis三大特性&#xff1a; 缓存、分布式内存数据库、持久化说明&#xff1a;非必须不建议在redis终端操作 ② redis亮点 ③ 初露锋芒 redis-benchmark redis-benchmark并发压力测试的问题解析 备注&#xff1a;多次测试取平均值,最好在物理机…

JVM内存模型:理解Java程序的内存管理

JVM内存模型&#xff1a;理解Java程序的内存管理 在Java编程中&#xff0c;JVM&#xff08;Java虚拟机&#xff09;是程序的运行环境&#xff0c;它负责管理程序的内存。JVM内存模型是Java语言规范中定义的一套规则&#xff0c;用于描述在JVM中程序如何通过内存来交互和操作。…

如何通过数据治理来提升业务价值——业务场景治理

数据治理&#xff0c;一方面是为了对数据的规范管理和控制&#xff0c;还有一方面是让数据能够为业务提供服务和创造价值。近些年来&#xff0c;随着数据治理技术发生着日新月异的变化&#xff0c;行业对数据治理的需求和指导也被逐步推进和实践&#xff0c;从宏观上看&#xf…

Django模版层

解析: forloop内置对象:运行结果解析 counter0: 从0开始计数 counter : 从1开始计数 first: True,判断循环的开始 last : Tues,判断循环的结束模版变量的书写 我们可以在html中编写python代码。 演示&#xff1a; {{ 填写变量 }}{% 填写类的 %}{{ d.0 }} {{ d.1 }…

CentOS挂载:解锁文件系统的力量

目录 引言1 挂载简介2 挂载本地分区3 挂载网络共享文件系统4 使用CIFS挂载结论 引言 在CentOS&#xff08;一种基于Linux的操作系统&#xff09;上挂载文件系统是一项常见而重要的任务&#xff0c;无论是将新的磁盘驱动器添加到系统&#xff0c;还是挂载网络共享资源&#xff…

Amazon Bedrock | 大语言模型CLAUDE 2体验

这场生成式AI与大语言模型的饥饿游戏&#xff0c;亚马逊云科技也参与了进来。2023年&#xff0c;亚马逊云科技正式发布了 Amazon Bedrock&#xff0c;是客户使用基础模型构建和扩展生成式AI应用程序的最简单方法&#xff0c;为所有开发者降低使用门槛。在 Bedrock 上&#xff0…

面试经典(6/150)轮转数组

面试经典&#xff08;6/150&#xff09;轮转数组 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 以下为自己的思路&#xff0c;我不明白最终的返回值为什么有误&#xff0c;好像是题目里要求原地解决问题&#xff0c;而我创…

K8S篇之k8s containerd模式fail to pull image certificate signed by unknown authority

一、前言 解决"k8s containerd模式fail to pull image certificate signed by unknown authority"的问题 二、操作步骤 您有两个选择&#xff1a;配置证书或禁用证书验证。 具体步骤如下&#xff1a; 方法一&#xff1a;配置证书 找到未知机构签名的证书文件&#x…