最近参与开发的一个后台项目,前端开发框架采用了 ReactJS
。因为之前一直是用 Vue
,虽然之前也有学习过 React
的一些知识,但仅仅是入门基础内容,并没有搭建过大型应用。这次正好利用这个机会,打算从头开始搭建一套基于 React
的前端框架。
经过技术调研和讨论,最终ui框架确定使用 AntDesign
,所以前端底层框架就选择了 UmiJS
。Umi
整合了阿里的 Dva
,AntDesign
,可以说是阿里前端工具的全家福了。
Umi 3.x
版本的官方介绍是:插件化的企业级前端应用框架。官方列出了6个特性,其中对开发人员来说,感兴趣的主要有3个:
可扩展
Umi
实现了完整的生命周期,并使其插件化,Umi
内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。
开箱即用
Umi
内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React
的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
完备路由
同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
前端开发工具推荐使用VS Code
,VS Code
中打开.tsx文件的默认模式应使用'TypeScript React'
下面就来说一下 Umi 3.X 的安装过程:
- 安装
Umi
之前,首先要保证安装了最新版的node
以及git
。 - 如果你还没有安装
yarn
和tyarn
,建议先安装它们。yarn
安装依赖包比nmp
的可靠性更高,具体参考两者的区别。tyarn
是yarn
的国内镜像,以下安装过程都是使用的tyarn
。 - 使用脚手架命令安装(二选一):
// 默认安装无提示
tyarn create @umijs/umi-app
或者
// 可以选择不同安装选项,有提示
tyarn create umi
正常安装后,继续安装依赖:
tyarn install
然后输入启动命令:
yarn start
不出意外的话,你可以在浏览器看到以下页面:
这就意味着我们的第一个以 Umi
为底层框架的前端 React
+ AntDesign
项目启动成功了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。