目錄

• 項目框架搭建的方式
• react腳手架
• Ant-design官網(wǎng)
• 一、安裝方式npm
• 二、安裝方式y(tǒng)arn
• 三、安裝方式umi dev

項目框架搭建的方式

react腳手架

命令行：

npx create-react-app myReactName

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

瀏覽器運行，端口號3000：

Ant-design官網(wǎng)

一、安裝方式npm

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

npx @umijs/create-umi-app

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

瀏覽器運行，端口號3000：yarn start失敗

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

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

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

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

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

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

命令行：

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

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

瀏覽器運行，端口號3000：

umi dev01這一步會直接打開頁面，并且pages文件夾下會多一個.umi目錄02.umi目錄是一個臨時目錄1.可以再這里做一些驗證，不要直接修改代碼2.umi重啟或者pages下的文件修改  會重新生成

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