美文网首页
Umi 快速上手

Umi 快速上手

作者: 菜菜的小阿允 | 来源:发表于2021-04-16 17:42 被阅读0次
    一、介绍

    1、根据官网介绍,Umi(乌米),是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
    2、 Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。
    3、它主要具备以下功能:

    • 可扩展,Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。
    • 开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
    • 企业级,经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证,值得信赖。
    • 大量自研,包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等,满足日常项目的周边需求。
    • 完备路由,同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
    • 面向未来,在满足需求的同时,我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。
    二、什么时候不用 umi?

    如果你

    • 需要支持 IE 8 或更低版本的浏览器
    • 需要支持 React 16.8.0 以下的 React
    • 需要跑在 Node 10 以下的环境中
    • 有很强的 webpack 自定义需求和主观意愿
    • 需要选择不同的路由方案

    Umi 可能不适合你。

    三、快速上手
    • 环境准备
    $ node -v
    v10.13.0
    $ npm i yarn tyarn -g
    $ tyarn -v
    
    • 脚手架
      先找个地方建个空目录
    $ mkdir myapp && cd myapp
    // 通过官方工具创建项目
    $ yarn create @umijs/umi-app
    
    • 安装依赖
    $ yarn
    
    • 启动项目
    $ yarn start
    

    在浏览器里打开 http://localhost:8000/,能看到以下界面

    • 修改配置
      默认的脚手架内置了 @umijs/preset-react,包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局,编辑 .umirc.ts 配置 layout: {},并且需要安装 @ant-design/pro-layout。
    import { defineConfig } from 'umi';
    
    export default defineConfig({
    + layout: {},
      routes: [
        { path: '/', component: '@/pages/index' },
      ],
    });
    

    不用重启 yarn start,webpack 会在背后增量编译,过一会就可以看到以下界面


    • 部署发布

    1、构建

    $ yarn build
    

    构建产物默认生成到 ./dist 下,然后通过 tree 命令查看

    tree ./dist
    
    ./dist
    ├── index.html
    ├── umi.css
    └── umi.js
    
    

    2、本地验证
    发布之前,可以通过 serve 做本地验证

    $ yarn add serve
    $ yarn serve ./dist
    

    访问http://localhost:5000,正常情况下应该是和执行 yarn start 时是一致的。

    3、部署
    本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。

    相关文章

      网友评论

          本文标题:Umi 快速上手

          本文链接:https://www.haomeiwen.com/subject/uiuelltx.html