原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
React+umi+typeScript创建项目的过程
目录项目框架搭建的方式react脚手架Ant-design官网一、安装方式npm二、安装方式yarn三、安装方式umidev
项目框架搭建的方式
react脚手架
命令行：
npxcreate-react-appmyReactName
项目目录结构：
浏览器运行，端口号3000：
Ant-design官网
一、安装方式npm
前提：reactES2015,nodejsv8+
命令行：
npx@umijs/create-umi-app
项目目录结构：
浏览器运行，端口号3000：yarnstart失败
二、安装方式yarn
前提：yarn全局安装配置
命令行：
推荐使用yarn安装
yarncreate@umijs/umi-app
项目目录结构：
新建路由以及子路由的配置：
前提：umi官网路由
01定义：
在Umi应用是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取html，html只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。
路由类型配置：
02分类：
1.开启hash模式，让build之后的产物包含hash后缀。通常用于增量发布和避免浏览器加载缓存。
2.设置路由history类型。
03通过命令创建一个/peoducts路由
npxumigpageproducts--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：yarnstart
三、安装方式umidev
前提：全局安装umi
安装umi:
npminstallumi-g
查看umi是否安装成功:
umi-v
命令行：
创建页面:
umigpageindex
umigpageusers
项目目录结构：
浏览器运行，端口号3000：
umidev
01这一步会直接打开页面，并且pages文件夹下会多一个.umi目录
02.umi目录是一个临时目录
1.可以再这里做一些验证，不要直接修改代码
2.umi重启或者pages下的文件修改会重新生成
文档评论（0）