从零开始建立一个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 便可看到这个没写一行代码建立好的页面。

接下来，修改代码来增删改对应的组件与配置便可！