从零开始创建一个React(Umi+AntD)项目

10,701 阅读2分钟

介绍

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 即可看到这个没写一行代码创建好的页面。

接下来,修改代码来增删改对应的组件与配置即可!