UMI开源项目

本文深入解析UMI,一款可插拔的企业级React应用框架。介绍了其开箱即用的特性,支持React Router、PWA、代码拆分等功能,以及如何快速安装、创建应用和页面,演示了构建和部署流程,并提供了AntDAdmin模板的运行步骤。

本文主要围绕UMI是什么及其特征、安装应用、模板例子等四个方面内容来讲解UMI,希望能够对初学者有所启发。

一、 UMI是什么

UMI是可插拔的企业级反应应用程序框架。

 

二、 特征

 

特征

  • 开箱即用,内置支持反应,反应路由器等。
  • Next.js喜欢和全功能的路由约定,它也支持配置的路由
  • 完整的插件系统,涵盖从源代码到生产的每个生命周期
  • 高性能,通过插件支持PWA,路由级代码拆分等
  • 支持静态导出,适应各种环境,如控制台应用程序,移动应用程序,鸡蛋,支付宝钱包等
  • 快速启动启动,支持使用config 启用dllhard-source-webpack-plugin
  • IE9兼容,基于umi-plugin-polyfills
  • 支持TypeScript,包括d.ts定义和umi test
  • dva深度集成,支持duck目录,自动加载模型,代码拆分等

 

三、 安装应用

#安装deps 
$ npm install -g umi

#创建应用程序 
$ mkdir myapp &&  cd myapp

#创建页面
$ umi generate page index

 #启动dev服务器

  $ umi dev

 

控制台正常输出结果如下:

 

页面显示:

 

#构建并部署
$ umi build

控制台输出如下:

 

 

四、 模板例子

 

除了前面我说的Ant Design之外还有一个AntD Admin

 

如何运行这个AntD Admin项目呢?很简单也就三步。

 

(1)克隆项目

git clone https://github.com/zuiidea/antd-admin.git my-project
cd my-project

 

 

(2) 安装依赖

npm install

 

(3) 运行项目

npm run start

控制台显示如下结果:

 

 

显示的界面:

 

转载于:https://www.cnblogs.com/youcong/p/10133391.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值