教你使用UmiJS框架开发React

1、什么是Umi.js?

umi,中文可发音为乌米,是一个可插拔的企业级react应用框架。你可以将它简单地理解为一个专注性能的类next.js前端框架,并通过约定、自动生成和解析代码等方式来辅助开发,减少我们开发者的代码量。

2、为什么使用Umi.js?

我们做react开发的时候会不会遇到以下问题?:2.1项目做大的时候,开发调试的启动和热更新时间会变得很长。2.2大应用下,网站打开很慢,有没有办法基于路由做到按需加载。2.3dva的model每次都要手写载入,能否一开始就同项目初始化好?

使用乌米,即可解决以上问题,并且还能提供如下优势:

开箱即用,内置react、react-router等类next.js且功能完备的路由约定,同时支持配置的路由方式完善的插件体系,覆盖从源码到构建产物的每个生命周期一键兼容到IE9完善的TypeScript支持与dva数据流的深入融合3、开箱即用的中台前端/设计解决方案ANTDESIGNPRO

优雅美观-基于AntDesign体系精心设计常见设计模式-提炼自中后台应用的典型页面和场景最新技术栈-使用React/dva/antd等前端前沿技术开发响应式-针对不同屏幕大小设计主题-可配置的主题满足多样化的品牌诉求国际化-内建业界通用的国际化方案最佳实践良好的工程实践助你持续产出高质量代码Mock数据-实用的本地数据调试方案UI测试-自动化测试保障前端产品质量4、安装Umi

npmcreateumi`projectName`Selecttheboilerplatetype(Usearrowkeys)ant-design-pro-Createprojectwithanlayout-onlyant-design-proboilerplate,usetogetherwithumiblock.app-Createprojectwithasimpleboilerplate,supporttypescript.plugin-Createaumiplugin.

选择ant-design-pro-ProV4-JavaScriptAntDesignPro脚手架将会自动安装。

5、常用目录说明

├──config#umi配置,包含路由,构建等配置├──mock#本地模拟数据├──public│└──favicon.png#Favicon│└──......├──src│├──assets#本地静态资源│├──


转载请注明:http://www.aierlanlan.com/rzdk/4069.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了