1.安裝
全局安裝 umi
npm install -g umi
推薦使用 yarn 代替 npm 來安裝 umi 倔监， yarn 會針對部分場景做一些緩存以節(jié)省時間用含，你可以輸入以下命令來全局安裝 yarn ：
npm i yarn -g
命令行執(zhí)行結(jié)束后遥椿，判斷 yarn 是否安裝成功：
$ yarn -v
1.9.4
2.腳手架創(chuàng)建項目
首先椭懊，創(chuàng)建一個空目錄
$ mkdir myapp && cd myapp
使用 @umijs/umi-app 為模板响疚，創(chuàng)建一個項目：
E:\react-workspaces\myapp>yarn create @umijs/umi-app
報錯：'D:\Program' 不是內(nèi)部或外部命令确憨，也不是可運行的程序
或批處理文件译荞。
于是我找到“D:\Program Files\nodejs\node_global\bin\”目錄下的 create-umi.cmd磁椒，內(nèi)容如下：
@"%~dp0\C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
然后就大概猜到是什么問題了慎皱，就是這個路徑的問題忽刽，在windows系統(tǒng)下，盤符前哪里還需要什么 '' 符號斑唬，所以果斷將 C: 盤符前的符號刪了，如下：
@"C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
然后再運行create-umi-app -v命令衡便，就可以正常顯示了，如果還不行的話，在環(huán)境變量的Path中添加create-umi-app所在的路徑侈咕，"D:\Program\nodejs\node_modules\bin" ，加入之后掌腰，重新打開命令行未桥，就可以解決問題了亦镶。
E:\react-workspaces\myapp>create-umi-app -v
@umijs/create-umi-app@3.5.41
E:\react-workspaces\myapp>create-umi-app
之后在創(chuàng)建umi項目時，千萬不要運行 yarn create @umijs/umi-app袱瓮，這樣會重新安裝create-umi-app缤骨，將會出現(xiàn)剛擦一樣的情況，想要創(chuàng)建項目尺借，只需要在項目路徑下绊起，運行“create-umi-app”即可
安裝依賴
$ yarn
# 或npm install
3.啟動項目
$ yarn start
# 或npm run start
問題描述：
報錯：Error: error:0308010C:digital envelope routines::unsupported
報錯原因：
主要是因為 nodeJs V17 版本發(fā)布了 OpenSSL3.0 對算法和秘鑰大小增加了更為嚴(yán)格的限制，nodeJs v17 之前版本沒影響燎斩，但 V17 和之后版本會出現(xiàn)這個錯誤虱歪。 我的node版本是v18+
解決方案:
方案1：打開IDEA 終端，直接輸入
Linux & Mac OS：
export NODE_OPTIONS=--openssl-legacy-provider
Windows：
set NODE_OPTIONS=--openssl-legacy-provider
方案2：打開IDEA 終端栅表，直接輸入（問題解決）
$env:NODE_OPTIONS="--openssl-legacy-provider"
方案3:卸載當(dāng)前版本笋鄙，安裝合適的版本(node.js)
方案4:
解決方式（僅限 windows）:
在項目中 package.json 的 scripts 中新增 SET NODE_OPTIONS=--openssl-legacy-provider
添加前：
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build"
},
添加后:
"scripts": {
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},
本人是采用第四種方案解決的
路由分類
約定式路由
默認(rèn)訪問pages文件夾下的index.tsx
配置式路由
在umirc.ts中配置路由
