这篇文章给大家分享的是“三种安装方式搭建react typeScript项目”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

目录

• 项目框架搭建的方式
• react脚手架
• Ant-design官网
• 一、安装方式npm
• 二、安装方式yarn
• 三、安装方式umi dev

项目框架搭建的方式

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 typeScript项目”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 利用vue实现元素可拖拽效果代码是什么

  本文实例为大家分享了vue实现拖拽交换位置的具体代码，供大家参考，具体内容如下template  div class=root    transition-group tag=div class=container      div        class=item        :class=item + i   

• 使用vue怎样实现表格自定义列的效果？

  今天给大家分享的是用vue怎样实现表格自定义列的效果，如果是做crm系统的朋友，应该常会遇到这样的需求，也就是用户可以按设置好的字段自定义排序或显示或隐藏表格的列，接下来我们详细了解看看这是怎样实现的吧。

• 用jQuery怎样实现一个字体滚动播放功能？

  在实际的应用中，有些场景需要在屏幕上做实时字体滚动播放，例如类似服务厅叫号显示，又或者是内容滚动循环播放，那么这样的功能是怎样做的呢？接下来小编就给大家分享怎样用jQuery实现这样的功能，实现代码如下。

• ECharts多图表联动效果用什么方法，具体是怎样的

  echarts是非常好用的图表插件,下面这篇文章主要给大家介绍了关于ECharts多图表联动功能的相关资料,需要的朋友可以参考下

• 用原生JS来实现一个简单幻灯片效果

  图片幻灯片是网页开发中的一个常见效果，可以用来展示商品广告，展示网站其他活动页面等等，这篇文章主要展示如何用原生JavaScript来实现一个简单的幻灯片。其效果为通过移动鼠标到相应的链接，下方同时展示对应的图片预留，以下是具体的代码。