写点什么

前端开发框架 react 之 UmiJS

  • 2021 年 12 月 06 日
  • 本文字数:1762 字

    阅读完需:约 6 分钟

​Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系前端培训,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。



它主要具备以下功能:


1、可扩展,Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。


2、开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。


为什么不是?create-react-app


create-react-app 是基于 webpack 的打包层方案,包含 build、dev、lint 等,他在打包层把体验做到了极致,但是不包含路由,不是框架,也不支持配置。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。


# 创建目录$ mkdir myapp && cd myapp

# 安装依赖$ yarn add umi

# 创建页面$ npx umi g page index --typescript --less

# 启动开发$ npx umi dev
复制代码


目录约定


├── dist/                          // 默认的 build 输出目录├── mock/                          // mock 文件所在目录,基于 express├── config/    ├── config.js                  // umi 配置,同 .umirc.js,二选一└── src/                           // 源码目录,可选    ├── layouts/index.js           // 全局布局    ├── pages/                     // 页面目录,里面的文件即路由        ├── .umi/                  // dev 临时目录,需添加到 .gitignore        ├── .umi-production/       // build 临时目录,会自动删除        ├── document.ejs           // HTML 模板        ├── 404.js                 // 404 页面        ├── page1.js               // 页面 1,任意命名,导出 react 组件        ├── page1.test.js          // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件        └── page2.js               // 页面 2,任意命名    ├── global.css                 // 约定的全局样式文件,自动引入,也可以用 global.less    ├── global.js                  // 可以在这里加入 polyfill├── .umirc.js                      // umi 配置,同 config/config.js,二选一├── .env                           // 环境变量└── package.json
复制代码


除配置式路由外,Umi 也支持约定式路由。约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。


如果没有 routes 配置,Umi 会进入约定式路由模式,然后分析 src/pages 目录拿到路由配置。


约定 src/layouts/index.js 为全局路由,返回一个 React 组件,通过 props.children 渲染子组件。


└── src    ├── layouts    │   └── index.tsx    └── pages        ├── index.tsx        └── users.tsx
复制代码


一个自定义的全局 layout 如下:


import React from 'react'import { IRouteComponentProps, Link } from 'umi'

export default function Layout({ children, location, route, history, match }: IRouteComponentProps) { // return children return ( <> <nav> <div> <div> <ul> <li><Link to="/" >首页</Link></li> <li><Link to="/user" >用户管理</Link></li> <li><Link to="/profile">个人设置</Link></li> </ul> </div> </div> </nav> <div> <div> <div> { children } </div> </div> </div> </> )}
复制代码


Umi 里约定目录下有 _layout.tsx 时会生成嵌套路由,以 _layout.tsx 为该目录的 layout。layout 文件需要返回一个 React 组件,并通过 props.children 渲染子组件。


比如以下目录结构,


└── pages    └── users        ├── _layout.tsx        ├── index.tsx        └── list.tsx
复制代码


用户头像

关注尚硅谷,轻松学IT 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
前端开发框架react 之UmiJS