最近参与开发的一个后台项目,前端开发框架采用了 ReactJS 。因为之前一直是用 Vue,虽然之前也有学习过 React 的一些知识,但仅仅是入门基础内容,并没有搭建过大型应用。这次正好利用这个机会,打算从头开始搭建一套基于 React 的前端框架。

经过技术调研和讨论,最终ui框架确定使用 AntDesign,所以前端底层框架就选择了 UmiJSUmi 整合了阿里的 DvaAntDesign,可以说是阿里前端工具的全家福了。

Umi 3.x 版本的官方介绍是:插件化的企业级前端应用框架。官方列出了6个特性,其中对开发人员来说,感兴趣的主要有3个:

  • 可扩展

Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。

  • 开箱即用

Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。

  • 完备路由

同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。

前端开发工具推荐使用 VS CodeVS Code 中打开.tsx文件的默认模式应使用 'TypeScript React'

下面就来说一下 Umi 3.X 的安装过程:

  1. 安装 Umi 之前,首先要保证安装了最新版的 node 以及 git
  2. 如果你还没有安装 yarntyarn,建议先安装它们。 yarn 安装依赖包比 nmp 的可靠性更高,具体参考两者的区别。tyarnyarn 的国内镜像,以下安装过程都是使用的 tyarn
  3. 使用脚手架命令安装(二选一):
// 默认安装无提示
tyarn create @umijs/umi-app

或者

// 可以选择不同安装选项,有提示
tyarn create umi

正常安装后,继续安装依赖:

tyarn install

然后输入启动命令:

yarn start

不出意外的话,你可以在浏览器看到以下页面:

image
这就意味着我们的第一个以 Umi 为底层框架的前端 React + AntDesign 项目启动成功了。


下一篇:UmiJS 3.X实战从头开始(二):如何使用


胡岗
554 声望27 粉丝

一切有为法 如梦幻泡影