开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第33天，点击查看活动详情

一、前言

上一章节我们实现了用户模块的增删改查接口，现在有了接口了就需要开始开发前端页面对其进行展示交互了。现在越来越多的前端开发框架和UI组件让我们能够更容易迅速的去开发前端页面，这一章节将通过react（Web开发框架）+antd（UI组件库）+ts（Javascript的超集）的技术栈来搭建我们的前端项目。

可能会有小伙伴问为什么选择上述的组合呢？这里简单做个解答：

首先，博主本身未对上述技术栈组合或其他技术栈组合做深层次的对比研究，之所以选择上面的组合型也是根据当下的流行程度、社区是否完善成熟和大厂朋友的建议进行选择的。在刚上手的时候也觉得学习起来很快，上手容易，就确定了这个选型了。

---

二、环境准备

1. 安装node.js （版本:14.18.1或更高）
2. vscode安装
3. 在nodejs中安装yarn（自行百度）

安装问题别问，自行安装！

---

三、创建antd前端项目

1）在自己想要的文目录下新建文件夹，名称为qntest-web：

---

2）打开cmd，进入该目录并执行下面的命令：

yarn create @umijs/umi-app

---

3）执行完成后使用Vscode打开项目，并再package.json文件中加入antd较高版本的依赖：

---

4）cmd执执行命令：yarn

---

5）新建路由：

npx umi g page products --typescript

---

6）在 .umirc.ts 中配置路由，如果有国际化需要，可以配置 locale 开启 antd 国际化：

import { defineConfig } from 'umi';

export default defineConfig({
+ locale: { antd: true },  //配置国际化
  routes: [
    { path: '/', component: '@/pages/index' },
+   { path: '/products', component: '@/pages/products' }, //新建路由
  ],
});

---

7）运行 yarn start 然后在浏览器里打开 http://localhost:8000/products，看到如下页面代表成功：

---

由于本专栏侧重于自动化测试平台本身的教学，关于技术栈的基础知识这里不再赘述。

对于UMI和antd的使用可以直接看antd官方文档：ant.design/docs/react/… 进行学习。

---

四、总结

对于没有js基础的建议先去学习一下js相关内容，有js基础的上手ts会特别快，无需特别的花时间去学习，对于react，也可以参考网上的教程进行学习。

其实国内的大多数程序员开发前端都选择的是vue，vue上手也确实比react简单不少，所以对于技术栈选择vue的同学可以参考我的理念而并非代码，相信也能有些收获。

下一章节会开始对接我们之前开发好的接口，来开发前端页面。