支付宝框架UmiJs(五米)_极快的类 Next.js 的 React 应用框架

时间: 2018-04-04阅读: 2779标签: 框架

最近有发现了一套dva过后的新的react应用框架--Umijs(当然也可叫做“优米”或者“五米”),

网址:https://umijs.org/zh-Hans/
github地址:https://github.com/umijs/umi

不知道,对Umijs这套框架有所了解的小伙伴们,对这套框架有什么看法呢?请留言哦!

也是刚刚了解这套框架,那么废话少说我们来切入主题吧。umi 就是一套零配置,按最佳实践进行开发的前端框架


Umijs特性:

1、高性能

    PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical css、preload、hash build、preact 等等,并且,你相同的代码会随着 umi 的改进而不断提升性能。

2、开箱即用

    你只需一个依赖 umi 就可启动开发,而无需安装 react、preactreact-router、eslint、babel、jest 等。

3、多端

    一键切换单页和多页,一份代码同时部署到 cdn、容器、云凤蝶等环境,详见部署文档。

4、扩展性

    umi 的整个生命周期都是插件化的,甚至就是由大量插件组成,比如 http mock、service worker、layout、高清方案等,都是一个个的插件。


Umijs开发体验

基于 create-react-app 实现更多体验上的优化,比如按需编译(不管有项目多大启动时间都不超过 10s)、dev server 断线重连、配置的校验、自动生效以及提示到行等。


Umijs的使用:

安装方法:

    用 npm 安装 umi :

npm i umi -g

   或者用 yarn :

yarn global add umi

    然后可以 umi -v 检查版本号: 

umi -v  
umi@1.0.0

创建应用:

创建应用并进入。 

mkdir myapp  
cd myapp

启动 dev 服务器:

umi dev  
  
Compiled successfully!  
You can now view Your App in the browser.  
  Local:            http://localhost:8000/  
Note that the development build is not optimized.  
To create a production build, use npm run build.

创建我们第一个umi页面:

在 pages 目录里新建首页。

echo 'export default () => <div>Index Page</div>' > pages/index.js

如果你是 Window 系统,可以手动新建 pages/index.js,并填入:

export default () => <div>Index Page</div>;

然后在浏览器中打开 http://localhost:8000/,你会看到 Index Page 。

构建应用:

umi build  
  
Compiled successfully.  
File sizes after gzip:  
  52.09 KB  static/umi.2b7e5e82.js  
  186 B     static/__common-umi.6a75ebe1.async.js

构建产物会生成在 dist 目录:

tree ./dist  
  
dist  
├── index.html  
└── static  
    ├── __common-umi.6a75ebe1.async.js  
    └── umi.2b7e5e82.js  
  
1 directory, 3 files

部署:

npm i serve -g  
cd dist  
serve  
  
Serving!  
  
- Local:            http://localhost:5000     
- On Your Network:  http://{Your IP}:5000  
  
Copied local address to clipboard!


这样UmiJS就可以算是上手了。

我们来看一下umi的目录结构:

.
├── dist/                          // 构建产物目录
└── src/                           // 源码目录,可选,把里面的内容直接移到外面即可
    ├── layouts/
    │   └── index.js               // 全局布局
    ├── pages/                     // 页面目录,里面的文件即路由
        ├── .umi/                  // dev 临时目录,需添加到 .gitignore
        ├── .umi-production/       // build 临时目录,会自动删除
        ├── document.ejs           // html 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1,任意命名
        └── page2.js               // 页面 2,任意命名
    ├── global.css                 // 约定的全局样式文件,自动引入,也可以用 global.less
    ├── _routes.json               // 路由配置,和文件路由二选一
├── test/                          // 测试用例放这里
├── .umirc.js                      // umi 配置
├── .webpackrc                     // webpack 配置
└── package.json

一定要记得pages目录是强约定目录哦。小伙伴,有什么要说的呢?谈一下,大家对支付宝这套新出框架“五米”的感想吧?


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/588

移动应用框架之战:原生、混合、跨平台!

近年来,智能手机用户数量大幅增加,数字达到数十亿。 因此,许多企业现在希望为其客户及其现有网站开发移动应用程序,因为大多数人都在使用他们的智能手机执行各种日常办公任务。

10 个最受欢迎的 JavaScript 框架

多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题

javascript有哪些常用框架?

JavaScript在2017年被IBM评为最值得学习的编程语言之一,自然而然它的流行度快速上升,并一直持续。这也促使了一个活跃的生态系统的生成以及与之相关的技术和框架的发展。

前端三大主流框架React、Vue、Angular的对比

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

请停止学习框架

我们都是程序员,我们需要与技术保持同步。每一天我们都要学习编程语言、框架与库。我们了解的现代开发工具越多越好,比如Angular,React,Riot,Vue,Ember,Knockout

css基本知识框架图

css样式表的基本概念;样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式;字体属性;文本属性----1.text-align(5种属性justify,inherit)

Truffle设置Solidity版本

你只需要在compilers.solc.version处指定要启用的solidity编译器版本就行了,truffle会自动从官方拉取相应版本的编译器,无需你手动下载配置。

Java 五大框架之间的对比

大部分项目都少不了spring的身影,为什么大家对他如此青睐,而且对他的追捧丝毫没有减退之势呢?Spring是一个轻量级的DI和AOP容器框架。说它轻量级有一大部分原因是相对与EJB的(虽然本人从没有接触过EJB的应用)

使用imba.io框架,得到比 vue 快50倍的性能基准

imba 是一种新的编程语言,可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。可以看出作者喜欢 ruby 以及 pug,偏向于缩进类风格(个人并不是很喜欢这种语法风格)

你为什么要使用前端框架Vue?

最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框架就 out 了.随着使用的深入我逐渐理解到框架的好处:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广