umi框架搭建

環(huán)境準(zhǔn)備

首先由node環(huán)境，確保node版本是10.13或以上（mac下推薦使用nvm來管理node版本）

$ node -v
v14.8.0

推薦使用 yarn 管理 npm 依賴，并使用國內(nèi)源（阿里用戶使用內(nèi)網(wǎng)源）。

# 國內(nèi)源
$ npm i yarn tyarn -g
# 后面文檔里的 yarn 換成 tyarn
$ tyarn -v
# 阿里內(nèi)網(wǎng)源
$ tnpm i yarn @ali/yarn -g
# 后面文檔里的 yarn 換成 ayarn
$ ayarn -v

腳手架

先找個(gè)地方建個(gè)空目錄。

$ mkdir umi-react && cd umi-react

通過官方工具創(chuàng)建項(xiàng)目

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app
Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

安裝依賴

$ yarn
yarn install v1.21.1
[1/4] ??  Resolving packages...
success Already up-to-date.
?  Done in 0.71s.

啟動(dòng)項(xiàng)目

$ yarn start
Starting the development server...
? Webpack
  Compiled successfully in 17.84s
 DONE  Compiled successfully in 17842ms                                       8:06:31 PM
  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.12.34:8000

在瀏覽器里打開 http://localhost:8000/，能看到以下界面

TB1JpeLwxD1gK0jSZFsXXbldVXa-1540-950.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容