江蘇環(huán)泰建設(shè)有限公司網(wǎng)站西安seo主管
項(xiàng)目框架搭建的方式
- react腳手架
- Ant-design官網(wǎng)
- 一、安裝方式npm
- 二、安裝方式y(tǒng)arn
- 三、安裝方式umi dev
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)都是在瀏覽器端完成的,不會重新請求服務(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 就會帶上 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這一步會直接打開頁面,并且pages文件夾下會多一個(gè).umi目錄
02.umi目錄是一個(gè)臨時(shí)目錄
1.可以再這里做一些驗(yàn)證,不要直接修改代碼
2.umi重啟或者pages下的文件修改 會重新生成