React+umi+typeScript创建项目的过程

更新时间：2023年02月23日 10:49:35 作者：影子信息

这篇文章主要介绍了React+umi+typeScript创建项目的过程,结合代码介绍了项目框架搭建的方式，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

项目框架搭建的方式

react脚手架

命令行：

npx create-react-app myReactName

项目目录结构：

浏览器运行，端口号3000：

Ant-design官网

一、安装方式npm

前提：react ES2015,nodejs v8+
命令行：

npx @umijs/create-umi-app

项目目录结构：

浏览器运行，端口号3000：yarn start失败

二、安装方式yarn

前提：yarn全局安装配置
命令行：

推荐使用yarn安装
yarn create @umijs/umi-app

项目目录结构：

新建路由以及子路由的配置：
前提：umi官网路由

01定义：
在 Umi 应用是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。
路由类型配置：
02分类：
1.开启 hash 模式，让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
2.设置路由 history 类型。
03通过命令创建一个/peoducts路由
npx umi g page products --typescript
04在.umirc.ts中配置路由

子路由配置：
步骤：

01配置子路由，通常在需要为多个路径增加 layout 组件时使用。
02然后在 src/layouts/index 中通过 <Outlet/> 渲染子路由，但是此处遇见了问题。
问题描述：
模块“"umi"”没有导出的成员“Outlet”。
解决思路：
1.主要是 ts 对 umi 的识别问题；
2.查看下 tsconfig.json 文件的配置
03最后，访问 /list 和 /admin 就会带上 src/layouts/index 这个 layout 组

代码示意图：

浏览器运行，端口号8000：yarn start

三、安装方式umi dev

前提：全局安装umi

安装umi:
npm install umi -g
查看umi是否安装成功:
umi -v

命令行：

创建页面:
umi g page index
umi g page users

项目目录结构：

浏览器运行，端口号3000：

umi dev
01这一步会直接打开页面，并且pages文件夹下会多一个.umi目录
02.umi目录是一个临时目录
1.可以再这里做一些验证，不要直接修改代码
2.umi重启或者pages下的文件修改  会重新生成

到此这篇关于React+umi+typeScript创建项目的过程的文章就介绍到这了,更多相关React+umi+typeScript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

nodejs和react实现即时通讯简易聊天室功能
这篇文章主要介绍了nodejs和react实现即时通讯简易聊天室功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
在React中正确处理异步操作的方法
本文全面介绍了在React中处理异步操作的方法、最佳实践及常见坑点,涵盖数据获取、延时任务、用户交互、动画和效果等典型场景,并提供了如useEffect、AbortController、ReactQuery等具体实现示例,感兴趣的朋友一起看看吧
2025-03-03
React使用React.lazy和Suspense实现组件懒加载
React 提供了 React.lazy 和 Suspense 这两个好东西,能让我们实现组件的懒加载,下面就跟随小编一起来了解一下如何使用它们实现懒加载的具体步骤吧
2025-03-03
react使用axios进行api网络请求的封装方法详解
这篇文章主要为大家详细介绍了react使用axios进行api网络请求的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
React.Children的用法详解
这篇文章主要介绍了React.Children的用法详解，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04
React Agent 自定义实现代码
在使用langchain的ReactAgent遇到问题后,作者尝试自定义ReactAgent实现,通过详细分析langchain中的agent功能和问题,结合React思想,作者设计了新的agent逻辑并在GitHub上分享了代码,新的ReactAgent通过改进prompt和工具调用逻辑,提升了任务执行的效果和稳定性
2024-10-10
使用ES6语法重构React代码详解
本篇文章主要介绍了使用ES6语法重构React代码详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
无废话快速上手React路由开发
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧
2021-05-05
教你react中如何理解usestate、useEffect副作用、useRef标识和useContext
这篇文章主要介绍了react中如何理解usestate、useEffect副作用、useRef标识和useContext,其实与vue中的ref和reactive一样，通过useState获取到的数据可以实现组件视图实时交互，而普通定义的数据仅仅在业务中使用，需要的朋友可以参考下
2022-11-11
前端面试题必会之前端react面试题
在前端面试过程中经常会问到一些面试题，今天小编抽空给大家讲解前端面试题之必会react面试题,需要的朋友可以参考下
2023-03-03