介绍

umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。

特性

开箱即用,内置 react、react-router 等

类 next.js 且功能完备的路由约定,同时支持配置的路由方式

完善的插件体系,覆盖从源码到构建产物的每个生命周期

高性能,通过插件支持 PWA、以路由为单元的 code splitting 等

支持静态页面导出,适配各种环境,比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等

开发启动快,支持一键开启 dll 等

一键兼容到 IE9,基于 umi-plugin-polyfills

完善的 TypeScript 支持,包括 d.ts 定义和 umi test

与 dva 数据流的深入融合,支持 duck directory、model 的自动加载、code splitting 等等

架构

下图是 umi 的架构图。

从源码到上线的生命周期管理

市面上的框架基本都是从源码到构建产物,很少会考虑到各种发布流程,而 umi 则多走了这一步。

下图是 umi 从源码到上线的一个流程。

umi 首先会加载用户的配置和插件,然后基于配置或者目录,生成一份路由配置,再基于此路由配置,把 JS/CSS 源码和 HTML 完整地串联起来。用户配置的参数和插件会影响流程里的每个环节。

环境准备

首先得有 node,并确保 node 版本是 8.10 或以上。(mac 下推荐使用 nvm 来管理 node 版本)

$ node -v

8.1x

复制代码

推荐使用 yarn 管理 npm 依赖,并使用国内源

# 国内源

$ npm i yarn tyarn -g

# 后面文档里的 yarn 换成 tyarn

$ tyarn -v

复制代码

然后全局安装 umi,并确保版本是 2.0.0 或以上。

$ yarn global add umi

$ umi -v

2.0.0

复制代码FAQ:如果提示 umi: command not found,你需要将 yarn global bin 路径配置到环境变量中,方法如下:

# mac 系统:

$ sudo vi ~/.bash_profile

# 在 .bash_profile 中添加下面一行:

export PATH="$PATH:`yarn global bin`"

# windows系统:

# 获取 global bin 的路径

$ yarn global bin

C:\Users\Administrator\AppData\Local\Yarn\bin

# 复制上面的 global bin 的路径,添加到系统环境变量 PATH。

复制代码

umijs有什么好处_UmiJS应用框架相关推荐

  1. umijs 修改默认配置_UmiJS基础教程(2) 目录结构

    一个基础的 Umi 项目大致是这样的, .├── package.json├── .umirc.ts├── .env├── dist├── mock├── public└── src ├── .umi ...

  2. java protostuff 好处_Java 序列化框架性能对比(kryo、hessian、java、protostuff)

    简介: 优点 缺点 Kryo 速度快,序列化后体积小 跨语言支持较复杂 Hessian 默认支持跨语言 较慢 Protostuff 速度快,基于protobuf 需静态编译 Protostuff-Ru ...

  3. php web框架 symfony简介

    Symfony是基于MVC架构的PHP框架 Symfony是一个用于快速开发现代Web应用程序的开源MVC框架. Symfony是一个完整的Web框架.它包含一组可重用的PHP组件.您可以在应用程序中 ...

  4. 多解决些问题,少谈些框架和流程

    大概我刚刚毕业那会,是常常喜欢在群里和网友谈论框架的,尤其是游戏服务器的框架设计,比如网关啦,逻辑服务器啦,地图服务器啦,登陆服务器啦等等,巴拉巴拉一大堆:我那会大概是刚刚接触游戏开发,刚刚明白了一条 ...

  5. **【ci框架】精通CodeIgniter框架

    http://blog.csdn.net/yanhui_wei/article/details/25803945 一.大纲 [php] view plaincopy 1.codeigniter框架的授 ...

  6. PHP框架编写和应用知识点,php框架知识点的整理和补充

    我们对于比较常见的php框架,已经基本上有所认识,不过一些比较冷门的框架也可以做一个了解,以便日后的特殊使用.本篇整理了4种php框架,在不同的使用方法上都独具特色,其中很多的框架不被大家熟知,下面我 ...

  7. 前端框架是什么意思?

    说起前端框架,很多人都不知道是什么意思,下面本篇文章就来给大家介绍一下前端框架是什么意思?希望对大家有所帮助. 前端框架是什么意思? 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如 ...

  8. java 框架 面试常见题目

    (一)spring mvc 工作机制(原理): DispatcherServlet主要用作职责调度工作,本身主要用于控制流程 Spring mvc运行原理 1.springmvc将所有的请求都提交给D ...

  9. Android DRM框架与基础知识

    Android DRM框架与基础知识 Android DRM框架 DRM框架的目的:能让安卓设备可以播放更多的内容,不同的内容和硬件设备可能使用的是不同的内容版权保护机制或者没有版权管理机制,但是安卓 ...

  10. javaWeb开发中为什么要使用框架

    ps:对于框架,刚开始接触编程,网络上查询资料,框架肯定是出现得比较频繁的词,为什么使用框架?当然是因为能够方便我们开发啦,那没有框架之前呢?不用框架该怎么实现呢?个人觉得明白这点对以后使用框架有很大 ...

最新文章

  1. 阿里飞天大数据飞天AI平台“双生”系统正式发布,9大全新数据产品集中亮相
  2. ​常用的连续概率分布汇总
  3. Linux内存初始化(一)
  4. Zxing二维码开源项目
  5. FreeMarker template error: The following has evaluated to null or missing
  6. 迭代器: isinstance
  7. 撤销 恢复快捷键 Linux,Linux Vim撤销和恢复撤销快捷键用法详解
  8. assign深拷贝_Object.assign 深拷贝?浅拷贝?
  9. 搜索提示的实现(仿百度):附源码和在线demo
  10. mysql的安装、启动和基础配置 —— mac版本
  11. 消防信号总线原理_消防安全微视频:可燃气体探测报警系统培训
  12. Flume-概述-安装
  13. macbookpro升级后打不开eclipse_苹果更新MacBook Pro等蝶式键盘维修计划机型,包括最新2019款...
  14. 基本的Java的MVC入门案例
  15. ATAPI(磁盘端口驱动)级文件保护简单实现
  16. 计算机桌面底部图标一直闪烁,win7系统桌面上的图标一直闪烁怎么办?图标一直闪烁的解决方法...
  17. Vue--day03--组件
  18. MTK6762 安卓 4g 核心板不同配置区别对比
  19. jquery 封装幻灯插件_21个jQuery幻灯片插件
  20. 知云文献,Endnote简易使用指南

热门文章

  1. C++多线程的6种创建方法
  2. 计算机程序设计流程图循环,流程图循环画法_流程图用什么办公软件
  3. python之pygame安装教程_Pygame安装教程
  4. Java日期格式化YYYYMMdd与yyyyMMdd的区别
  5. linux查看nginx昅 电视,PHP实现查询汉字笔画、笔画排序、笔画统计
  6. Unity3D 智能巡逻兵
  7. 【控制理论】预测控制分析
  8. 远程接入CBTS的应用
  9. java对象转map_java中实现map与对象相互转换的几种实现
  10. kubectl源码分析之config get-contexts