從零開始建立一個React(Umi+AntD)項目

介紹

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 文件，啓用 dva 與 antd:

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

再次啓動項目便可看到網頁右下角出現一個圖標，點開便可開始探索 Umi UI。

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

打開 Umi UI，選擇一個模版添加到項目中：

自定義配置，例如配置新頁面的路由與代碼文件位置：

肯定後訪問 http://localhost:8000/apps 便可看到這個沒寫一行代碼建立好的頁面。

接下來，修改代碼來增刪改對應的組件與配置便可！