- 所在位置：
- 首頁 >
- 編程技術(shù) >
- JavaScript >
- 三種安裝方式搭建react typeScript項(xiàng)目
三種安裝方式搭建react typeScript項(xiàng)目
Admin 2023-04-08 群英技術(shù)資訊 1909 次瀏覽
這篇文章給大家分享的是“三種安裝方式搭建react typeScript項(xiàng)目”，對大家學(xué)習(xí)和理解有一定的參考價值和幫助，有這方面學(xué)習(xí)需要的朋友，接下來就跟隨小編一起學(xué)習(xí)一下吧。目錄
- 項(xiàng)目框架搭建的方式
- react腳手架
- Ant-design官網(wǎng)
- 一、安裝方式npm
- 二、安裝方式y(tǒng)arn
- 三、安裝方式umi dev
項(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)都是在瀏覽器端完成的，不會重新請求服務(wù)端獲取 html，html 只在應(yīng)用初始化時加載一次。所有頁面由不同的組件構(gòu)成，頁面的切換其實(shí)就是不同組件的切換，你只需要在配置中把不同的路由路徑和對應(yīng)的組件關(guān)聯(lián)上。 路由類型配置： 02分類： 1.開啟 hash 模式，讓 build 之后的產(chǎn)物包含 hash 后綴。通常用于增量發(fā)布和避免瀏覽器加載緩存。 2.設(shè)置路由 history 類型。 03通過命令創(chuàng)建一個/peoducts路由 npx umi g page products --typescript 04在.umirc.ts中配置路由
子路由配置：
步驟：
01配置子路由，通常在需要為多個路徑增加 layout 組件時使用。 02然后在 src/layouts/index 中通過 <Outlet/> 渲染子路由，但是此處遇見了問題。 問題描述： 模塊“"umi"”沒有導(dǎo)出的成員“Outlet”。 解決思路： 1.主要是 ts 對 umi 的識別問題； 2.查看下 tsconfig.json 文件的配置 03最后，訪問 /list 和 /admin 就會帶上 src/layouts/index 這個 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文件夾下會多一個.umi目錄 02.umi目錄是一個臨時目錄 1.可以再這里做一些驗(yàn)證，不要直接修改代碼 2.umi重啟或者pages下的文件修改 會重新生成
以上就是關(guān)于“三種安裝方式搭建react typeScript項(xiàng)目”的介紹了，感謝各位的閱讀，希望這篇文章能幫助大家解決問題。如果想要了解更多知識，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會為大家更新不同的知識。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
jquery開發(fā)過程避免重復(fù)提交用什么方法，具體如何做
客戶端的抖動,快速操作,網(wǎng)絡(luò)通信或者服務(wù)器響應(yīng)慢,都容易造成服務(wù)器重復(fù)處理,這篇文章主要給大家介紹了關(guān)于jquery項(xiàng)目中如何防重復(fù)提交的相關(guān)資料,需要的朋友可以參考下
-
用JS實(shí)現(xiàn)Tab欄切換的面向過程和面向?qū)ο蠓椒ㄊ窃鯓?
JS實(shí)現(xiàn)Tab欄切換的兩種方式案例詳解 面向過程的寫法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= ...
-
什么是沙箱，有哪些應(yīng)用場景及怎樣使用
在計算機(jī)安全中,沙箱（Sandbox）是一種用于隔離正在運(yùn)行程序的安全機(jī)制,通常用于執(zhí)行未經(jīng)測試或不受信任的程序或代碼,它會 為待執(zhí)行的程序創(chuàng)建一個獨(dú)立的執(zhí)行環(huán)境,內(nèi)部程序的執(zhí)行不會影響到外部程序的運(yùn)行,下文我們來介紹一個“瀏覽器世界”的沙箱
-
如何JavaScript寫表格插件，步驟及代碼是什么
這篇文章主要為大家介紹了用java編程來寫一款JavaScript表格插件，非常的使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
-
jquery初始化的常見幾種方法是什么樣的
jquery初始化方法通常是下面這四種，使用非常的普遍，js初始化是在界面加載完成后執(zhí)行的一些函數(shù)，在使用jquery初始化之前需要在head標(biāo)簽內(nèi)引入jquery包，例如： scripttype=text/javascriptsrc=./js/jquery.min.js/script Jquery初始化方法一： scripttype=
推薦內(nèi)容
- CSS中flex布局如何實(shí)現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實(shí)現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
相關(guān)標(biāo)簽
成為群英會員,開啟智能安全云計算之旅
立即注冊友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評測 idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
