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

使用Vite创建React + TypeScript(pro和mobile,含完整的空项目结构资源可供下载)

PC端

安装指令:
npm create vite@latest react-ts-pro -- --template react-tsVite是一个框架无关的前端工具链,可以快速的生成一个React + TS的开发环境,并且可以提供快速的开发体验说明:
1. npm create vite@latest固定写法(使用最新版本vite初始化项目)
2. react-ts-pro  项目名称(自定义)
3. -- --template react-ts   指定项目模板为react+ts

移动端(mobile)

1. 安装:
npm create vite@latest react-jike-mobile -- --template react-ts2. 安装Ant Design Mobile
npm i --save antd-mobile

初始化路由(react-router-dom, 使用与我另一篇文章一模一样直接参考即可,ReactRouter使用详解(react-router-dom))

1. 安装
npm i react-router-dom

配置路径别名@(使用CRA可参考:cra(create-react-app)配置别名路径@ 以及Vscode联想路径配置)

1. 安装插件:
npm i @types/node -D2. 修改vite.config.tsimport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'// 配置别名路径,安装插件后才有path
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],// 配置别名路径resolve: {alias: {'@': path.resolve(__dirname, './src')}}
})3. 修改tsconfig.json{"compilerOptions": {// vscode联想配置"baseUrl": "./","paths": {"@/*": ["src/*"]}}
}

安装插件axios

npm i axioshttp.ts封装代码如下:// 封装axiosimport axios from 'axios';const httpInstance = axios.create({baseURL: 'http://geek.itheima.net',timeout: 5000
});// 拦截器
httpInstance.interceptors.request.use(config => {return config},error => {return Promise.reject(error)}
)httpInstance.interceptors.response.use(response => {return response},error => {return Promise.reject(error)}
)export default httpInstance;

封装API模块-axios和ts的配合使用

场景:axios提供了request泛型方法,方便我们传入类型参数推导出接口返回值的类型
说明:泛型参数Type的类型决定了res.data的类型具体演示代码如下:import { http } from '@/utils';// 假设后端返回的类型结构是这个
// {
//     data: {
//         channels: [
//             {
//                 id: 1,
//                 name: ''
//             }
//         ]
//     },
//     nessage: ""
// }/*** channel列表查询*/// 1. 定义通用泛型(根据后端接口返回的数据来定义)
// data不是写死的,因此用通用的T(T代表泛型)
export type ResType<T> = {message: stringdata: T
}// 2. 子项,定义具体特有的接口类型
type ChannelItem = {id: numbername: string
}// 整体类型:ChannelRes是data特有的类型
type ChannelRes = {channels: ChannelItem[]
}// 请求频道列表
export function fetchChannelAPI() {http.request<ResType<ChannelRes>>({url: '/channels'})
}/*** 文章列表查询*/type ListItem = {is_top: string,cover: {type: numberimage: string[]}
}type ListRes = {results: ListItem[]pre_timestamp: string
}// 传参类型
type ReqParams = {channel_id: stringtimestamp: string
}export function fetchListAPI(params: ReqParams) {return http.request<ResType<ListRes>>({url: '/articles',params})
}组件内使用代码如下:方案一:
fetchChannelAPI().then(res => {console.log(res.data)
})方案二(建议写法):
useEffect(() => {const getLists = async () => {try {const res = await fetchListAPI();setLists(res.data);} catch (error) {throw new Error('fetch channel error')}}getLists();
}, [])

ts基础数据渲染写法

import { useEffect, useState } from 'react';
import { fetchChannelAPI, ChannelItem } from '@/apis/user';type ChannelItem = {id: numbername: string
}function Home() {const [channels, setChannels] = useState<ChannelItem[]>([]);useEffect(() => {// const getChannels = async() => {//   try {//     const res = await fetchChannelAPI();//     setChannels(res.data);//   } catch (error) {//     throw new Error('fetch channel error')//   }// }// getChannels();}, [])return (<div>Home</div>)
}export default Home;

ts基础数据渲染写法(自定义hook优化)

1. index.tsx代码如下:import { useTabs } from './useTabs';function Home() {const {channels} = useTabs();return (<div>Home<ul>{channels.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default Home;// 抽离出业务部分封装成useTab
2. useTabs.tsx代码如下:import { useEffect, useState } from 'react';
import { fetchChannelAPI, ChannelItem } from '@/apis/user';function useTabs() {const [channels, setChannels] = useState<ChannelItem[]>([]);useEffect(() => {const getChannels = async () => {try {const res = await fetchChannelAPI();setChannels(res.data);} catch (error) {throw new Error('fetch channel error')}}getChannels();}, [])return {channels}
}export { useTabs };

详情模块 - 路由跳转

1. Home组件代码如下:// import { useTabs } from './useTabs';import { useNavigate } from "react-router-dom";function Home() {// const {channels} = useTabs();const navigate = useNavigate();const goDetail = () => {navigate('/detail?id=159')}return (<div>Home{/* <ul>{channels.map(item => <li key={item.id}>{item.name}</li>)}</ul> */}<hr /><button onClick={goDetail}>Detail</button></div>)
}export default Home;2. Detail组件代码如下:import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";function Detail() {const [params] = useSearchParams();useEffect(() => {const id = params.get('id');console.log(id);}, [])return (<div>Detail</div>)
}export default Detail;

相关文章:

使用Vite创建React + TypeScript(pro和mobile,含完整的空项目结构资源可供下载)

PC端 安装指令&#xff1a; npm create vitelatest react-ts-pro -- --template react-tsVite是一个框架无关的前端工具链&#xff0c;可以快速的生成一个React TS的开发环境&#xff0c;并且可以提供快速的开发体验说明&#xff1a; 1. npm create vitelatest固定写法&#…...

第一次记录QPSK,BSPK,MPSK,QAM—MATLAB实现

最近有偶然的机会学习了一次QPSK防止以后忘记又得找资料&#xff0c;这里就详细的记录一下 基于 QPSK 的通信系统如图 1 所示&#xff0c;QPSK 调制是目前最常用的一种卫星数字和数 字集群信号调制方式&#xff0c;它具有较高的频谱利用率、较强的抗干扰性、在电路上实现也较为…...

每周一算法:区间覆盖

问题描述 给定 N N N个闭区间 [ a i , b i ] [a_i,b_i] [ai​,bi​]&#xff0c;以及一个线段区间 [ s , t ] [s,t] [s,t]&#xff0c;请你选择尽量少的区间&#xff0c;将指定线段区间完全覆盖。 输出最少区间数&#xff0c;如果无法完全覆盖则输出 − 1 -1 −1。 输入格式…...

im6ull学习总结(二)Framebuffer 应用编程

1 LCD操作原理 linux中通过framebuffer驱动程序来控制LCD。framebuffer中包含LCD的参数&#xff0c;大小为LCD分辨率xbpp。framebuffer 是一块内存 内存中保存了一帧图像。 关于图像的帧指的是在图像处理中&#xff0c;一帧&#xff08;Frame&#xff09;是指图像序列中的单个…...

数据仓库 基本信息

数据仓库基本理论 数据仓库&#xff08;英语&#xff1a;Data Warehouse&#xff0c;简称数仓、DW&#xff09;,是一个用于存储、分析、报告的数据系统。数据仓库的目的是构建面向分析的集成化数据环境&#xff0c;为企业提供决策支持&#xff08;Decision Support&#xff09…...

仓储革新:AR技术引领物流进入智慧时代

根据《2022年中国物流行业研究&#xff1a;深度探析行业现状&#xff08;智能设备及智能软件&#xff09;》&#xff0c;报告中提及&#xff1a;“中国社会物流总额依然保持着较为良好的增长态势&#xff0c;年增速已恢复至常年平均水平。2021年社会物流总额细分中工业物流总额…...

软件仓库部署及应用

随着某公司内部的Linux服务器不断增多&#xff0c;软件更新&#xff0c;系统升级等需求也逐渐凸显。为了提高软 件包管理效率&#xff0c;减少重复下载&#xff0c;公司要求部署一台软件仓库服务器&#xff0c;面向内网提供安装源。 需求描述 > 服务器使用CentOS7操作系统I…...

ASUS华硕ROG幻16笔记本电脑2023款GU604VI VZ VY原装出厂Windows11系统22H2

华硕玩家国度幻16笔记本原厂W11系统&#xff0c;适用型号&#xff1a;GU604VI、GU604VZ、GU604VY 链接&#xff1a;https://pan.baidu.com/s/166x6FNUFEpA3Qbzeory3Hg?pwdlwau 提取码&#xff1a;lwau 系统自带所有驱动、出厂主题壁纸、Office办公软件、MyASUS华硕电脑管…...

可视化云监控/安防监控系统EasyCVR视频管理平台播流失败的原因(端口篇)

安防视频监控EasyCVR平台兼容性强&#xff0c;可支持的接入协议众多&#xff0c;包括国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等。平台能将接入的视频…...

边缘检测——PidiNet网络训练自己数据集并优化推理测试(详细图文教程)

PiDiNet 是一种用于边缘检测的算法&#xff0c;它提出了一种简单、轻量级但有效的架构。PiDiNet 采用了新 颖的像素差卷积&#xff0c;将传统的边缘检测算子集成到现代 CNN 中流行的卷积运算中&#xff0c;以增强任务性能。 在 BSDS500、NYUD 和 Multicue 上进行了大量的实验…...

SpringBoot整合Mybatis遇到的常见问题及解决方案

大家好&#xff0c;我是升仔 一、背景 SpringBoot与Mybatis的整合是Java开发中常见的实践&#xff0c;用于简化数据库操作。然而&#xff0c;在整合过程中&#xff0c;开发者可能会遇到各种问题&#xff0c;影响开发效率和应用性能。 二、具体问题及解决方案 问题&#xff1…...

【10】ES6:Promise 对象

一、同步和异步 1、JS 是单线程语言 JavaScript 是一门单线程的语言&#xff0c;因此同一个时间只能做一件事情&#xff0c;这意味着所有任务都需要排队&#xff0c;前一个任务执行完&#xff0c;才会执行下一个任务。但是&#xff0c;如果前一个任务的执行时间很长&#xff…...

Hive和Spark生产集群搭建(spark on doris)

1.环境准备 1.1 版本选择 序号bigdata-001bigdata-002bigdata-003bigdata-004bigdata-005MySQL-8.0.31mysqlDataxDataxDataxDataxDataxDataxSpark-3.3.1SparkSparkSparkSparkSparkHive-3.1.3HiveHive 1.2 主要组件官网 hive官网&#xff1a; https://hive.apache.org/ hive…...

VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 —— 防止踩坑篇

vuePress官网地址 &#x1f449; 首页 | VuePress 手动安装 这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档&#xff0c;从步骤 3 开始。 步骤 1: 创建并进入一个新目录 mkdir vuepress-starter cd vuepress-star…...

【PostgreSQL】从零开始:(三十一)数据类型-复合类型

复合类型 复合类型是一种由其他类型组成的类型。它可以是数组、结构体、联合体或指向这些类型的指针。复合类型允许将多个值组合成单个实体&#xff0c;以便更方便地处理和使用。复合类型在C语言中非常常见&#xff0c;用于表示复杂的数据结构和组织数据的方式。 数组是一种由…...

基于鸿蒙OS开发一个前端应用

创建JS工程&#xff1a;做鸿蒙应用开发到底学习些啥&#xff1f; 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择HarmonyOS模板库&#xff0c…...

PIC单片机项目(7)——基于PIC16F877A的智能灯光设计

1.功能设计 使用PIC16F877A单片机&#xff0c;检测环境关照&#xff0c;当光照比阈值低的时候&#xff0c;开灯。光照阈值可以通过按键进行设置&#xff0c;同时阈值可以保存在EEPROM中&#xff0c;断电不丢失。使用LCD1602进行显示&#xff0c;第一行显示测到的实时光照强度&a…...

Mysql For Navicate (老韩)

Navicate创建数据库 先创建一个数据库;然后在数据库中创建一张表;在表格当中填入相应的属性字段;打开表, 然后填入相应的实例字段; – 使用数据库图形化App和使用指令来进行操作各有各的好处和利弊; 数据库的三层结构(破除MySQL神秘) 所谓安装Mysql数据库, 就是在主机安装一…...

设计模式之-建造者模式通俗易懂理解,以及建造者模式的使用场景和示列代码

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…...

Redis分布式锁进阶源码分析

Redis分布式锁进阶源码分析 1、如何写一个商品秒杀代码&#xff1f;2、加上Java锁3、使用redis setnx命令获取锁4、增加try和finally5、给锁设置过期时间6、增长过期时间&#xff0c;并setnx增加唯一value7、使用redisson8、源码分析a、RedissonLock.tryLockInnerAsyncb、Redis…...

5步突破:用RVC变声器从零到专业音色转换的实战指南

5步突破&#xff1a;用RVC变声器从零到专业音色转换的实战指南 【免费下载链接】Retrieval-based-Voice-Conversion-WebUI 语音数据小于等于10分钟也可以用来训练一个优秀的变声模型&#xff01; 项目地址: https://gitcode.com/GitHub_Trending/re/Retrieval-based-Voice-Co…...

ANIMATEDIFF PRO新手避坑指南:常见问题与解决方案全解析

ANIMATEDIFF PRO新手避坑指南&#xff1a;常见问题与解决方案全解析 1. 前言&#xff1a;为什么选择ANIMATEDIFF PRO 如果你正在寻找一款能够生成电影级质量AI视频的工具&#xff0c;ANIMATEDIFF PRO可能是目前最强大的选择之一。基于AnimateDiff架构和Realistic Vision V5.1…...

Win10 LTSC 1809系统下Docker 4.0.0与CVAT 2.31.0的完美搭配:避坑指南与性能优化

Win10 LTSC 1809系统下Docker 4.0.0与CVAT 2.31.0的完美搭配&#xff1a;避坑指南与性能优化 在工业级计算机视觉标注领域&#xff0c;CVAT&#xff08;Computer Vision Annotation Tool&#xff09;凭借其开源特性和强大的标注功能&#xff0c;已成为许多研究团队的首选工具。…...

Rk3566 yolov5部署(一)Ubuntu系统镜像烧录与串口调试实战

1. 准备工作&#xff1a;硬件与软件清单 在开始RK3566开发板的Ubuntu系统镜像烧录之前&#xff0c;我们需要准备好必要的硬件和软件工具。我刚开始接触这块开发板时&#xff0c;就因为漏掉了几个小配件耽误了一整天时间&#xff0c;所以特别提醒大家要仔细检查以下清单。 硬件部…...

新手别慌!手把手教你用嘉立创EDA专业版搞定蓝桥杯平衡车PCB布局布线

从零到精通&#xff1a;嘉立创EDA专业版实战蓝桥杯平衡车PCB设计全攻略 第一次接触蓝桥杯电子设计竞赛的平衡车项目时&#xff0c;面对密密麻麻的元器件和错综复杂的布线要求&#xff0c;很多同学都会感到无从下手。本文将带你一步步攻克这个看似复杂的PCB设计任务&#xff0c;…...

ESP32无线心情记录仪设计与物联网应用

1. 基于ESP32的无线心情记录仪设计与实现1.1 项目背景与功能概述现代工程师工作压力大&#xff0c;情绪波动频繁&#xff0c;需要有效的情绪管理工具。本项目设计了一款基于无线射频技术的情绪记录装置&#xff0c;通过物理按键触发和云端数据记录的方式&#xff0c;帮助用户量…...

HarmonyOS6 半年磨一剑 - RcTextarea 组件核心架构与类型系统设计

文章目录前言一、组件整体架构1.1 文件结构1.2 装饰器体系二、类型系统深度解析2.1 边框模式类型2.2 清空触发类型2.3 格式化与解析函数类型2.4 文本对齐与回车键类型三、核心参数体系3.1 必传参数3.2 尺寸相关参数3.3 功能开关参数四、内部状态与生命周期4.1 内部状态设计4.2 …...

网易云音乐评论数据分析:用Python爬取+可视化热门歌曲情感倾向

网易云音乐评论数据挖掘&#xff1a;从爬取到情感分析的完整实战指南 音乐平台的用户评论蕴含着丰富的情感价值和商业洞察。作为国内领先的音乐社区&#xff0c;网易云音乐的海量评论数据对产品经理优化功能、市场人员分析用户偏好具有重要价值。本文将系统性地介绍如何通过Pyt…...

在WSL2 Ubuntu 22.04上搞定RK3568 SDK编译:我遇到的8个坑和填坑方法

在WSL2 Ubuntu 22.04上搞定RK3568 SDK编译&#xff1a;我遇到的8个坑和填坑方法 作为一名长期在Windows环境下工作的嵌入式开发者&#xff0c;第一次尝试在WSL2中编译RK3568 SDK的经历简直像是一场噩梦。从环境配置到最终构建成功&#xff0c;我踩遍了几乎所有可能的坑。这篇文…...

2026年3月27日NSSCTF之[SWPUCTF 2021 新生赛]ez_unserialize

[SWPUCTF 2021 新生赛]ez_unserialize 开启环境&#xff0c;进入并查看&#xff0c;可以看到一个动图&#xff0c;选择查看网页源码&#xff0c;得到 看到有隐藏信息&#xff0c;根据隐藏信息可以猜测&#xff0c;可以利用robots协议查看相关信息&#xff0c;访问得到 可以得…...