快捷導(dǎo)航

React+umi+typeScript創(chuàng)建項(xiàng)目的過程

更新時(shí)間：2023年02月23日 10:49:35 作者：影子信息

這篇文章主要介紹了React+umi+typeScript創(chuàng)建項(xiàng)目的過程,結(jié)合代碼介紹了項(xiàng)目框架搭建的方式，本文給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

項(xiàng)目框架搭建的方式

react腳手架

命令行：

npx create-react-app myReactName

項(xiàng)目目錄結(jié)構(gòu)：

瀏覽器運(yùn)行，端口號3000：

Ant-design官網(wǎng)

一、安裝方式npm

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

npx @umijs/create-umi-app

項(xiàng)目目錄結(jié)構(gòu)：

瀏覽器運(yùn)行，端口號3000：yarn start失敗

二、安裝方式y(tǒng)arn

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

推薦使用yarn安裝
yarn create @umijs/umi-app

項(xiàng)目目錄結(jié)構(gòu)：

新建路由以及子路由的配置：
前提：umi官網(wǎng)路由

01定義：
在 Umi 應(yīng)用是單頁應(yīng)用，頁面地址的跳轉(zhuǎn)都是在瀏覽器端完成的，不會(huì)重新請求服務(wù)端獲取 html，html 只在應(yīng)用初始化時(shí)加載一次。所有頁面由不同的組件構(gòu)成，頁面的切換其實(shí)就是不同組件的切換，你只需要在配置中把不同的路由路徑和對應(yīng)的組件關(guān)聯(lián)上。
路由類型配置：
02分類：
1.開啟 hash 模式，讓 build 之后的產(chǎn)物包含 hash 后綴。通常用于增量發(fā)布和避免瀏覽器加載緩存。
2.設(shè)置路由 history 類型。
03通過命令創(chuàng)建一個(gè)/peoducts路由
npx umi g page products --typescript
04在.umirc.ts中配置路由

子路由配置：
步驟：

01配置子路由，通常在需要為多個(gè)路徑增加 layout 組件時(shí)使用。
02然后在 src/layouts/index 中通過 <Outlet/> 渲染子路由，但是此處遇見了問題。
問題描述：
模塊“"umi"”沒有導(dǎo)出的成員“Outlet”。
解決思路：
1.主要是 ts 對 umi 的識別問題；
2.查看下 tsconfig.json 文件的配置
03最后，訪問 /list 和 /admin 就會(huì)帶上 src/layouts/index 這個(gè) layout 組

代碼示意圖：

瀏覽器運(yùn)行，端口號8000：yarn start

三、安裝方式umi dev

前提：全局安裝umi

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

命令行：

創(chuàng)建頁面:
umi g page index
umi g page users

項(xiàng)目目錄結(jié)構(gòu)：

瀏覽器運(yùn)行，端口號3000：

umi dev
01這一步會(huì)直接打開頁面，并且pages文件夾下會(huì)多一個(gè).umi目錄
02.umi目錄是一個(gè)臨時(shí)目錄
1.可以再這里做一些驗(yàn)證，不要直接修改代碼
2.umi重啟或者pages下的文件修改  會(huì)重新生成

到此這篇關(guān)于React+umi+typeScript創(chuàng)建項(xiàng)目的過程的文章就介紹到這了,更多相關(guān)React+umi+typeScript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: