從零開始建立一個React(Umi+AntD)專案

語言: CN / TW / HK

介紹

Umi

整合常用元件、外掛的前端應用框架。開箱即用,有封裝好的佈局可以直接應用。

官方文件:umijs.org/zh-CN/docs

AntD

豐富的元件庫。

官方文件:ant.design/docs/react/…

初始化環境與程式碼

本文以 Ubuntu 18.04 為例

初始化 Node 環境

Umi3 要求安裝 NodeJS 10.13+

下載 NodeJS 壓縮包:

wget https://npm.taobao.org/mirrors/node/v10.21.0/node-v10.21.0-linux-x64.tar.gz
複製程式碼

解壓到 /usr/local/lib/ 目錄下(或其他目錄,則自行修改下面命令中的路徑):

tar -zxvf node-v10.21.0-linux-x64.tar.gz -C /usr/local/lib
複製程式碼

可能需要管理員許可權,新增 sudo

軟連線執行命令:

NODE_PATH=/usr/local/lib/node-v10.21.0-linux-x64/bin
BIN_PATH=/usr/local/bin
ln -s $NODE_PATH/node $BIN_PATH/node
ln -s $NODE_PATH/npm $BIN_PATH/npm
ln -s $NODE_PATH/npx $BIN_PATH/npx
複製程式碼

可能需要管理員許可權,新增 sudo

驗證配置完成:

node -v
npm -v
複製程式碼

輸出版本資訊表示 NodeJS 安裝成功。

初始化 Umi 專案

建立並進入專案資料夾:

mkdir myapp && cd myapp
複製程式碼

初始化 Umi 專案:

npx @umijs/create-umi-app
複製程式碼

會在資料夾中生成 package.json 等檔案,Umi 專案的依賴、啟動命令等都已配置完成。

安裝 node 依賴:

npm i
複製程式碼

啟動服務:

npm start
複製程式碼

通過 http://localhost:8000 (具體埠參考實際啟動後的提示) 訪問專案初始頁面:

安裝 Umi UI 工具

Umi UI 支援在網頁上為應用新增現成的模版、啟停前端服務等功能。

安裝:

npm i @umijs/preset-ui
複製程式碼

修改 .umirc.ts 檔案,啟用 dvaantd:

export default defineConfig({
  ...  // 忽略其他配置
  dva: {},
  antd: {}
});
複製程式碼

再次啟動專案即可看到網頁右下角出現一個圖示,點開即可開始探索 Umi UI

使用 Umi UI 建立一個模版頁面

開啟 Umi UI,選擇一個模版新增到專案中:

自定義配置,例如配置新頁面的路由與程式碼檔案位置:

確定後訪問 http://localhost:8000/apps 即可看到這個沒寫一行程式碼建立好的頁面。

接下來,修改程式碼來增刪改對應的元件與配置即可!