为了账号安全,请及时绑定邮箱和手机立即绑定

umi.js 一个集成 react 全家桶的框架

2020.11.17 20:20 466浏览

umi.js 一个集成 react 全家桶的框架

1,为什么选择 umi.js 这个框架

使用 react 开发项目之后,渐渐发现,常用的第三方依赖包就那么几个:主框架 react.js,路由 react-router,数据处理 redux,代码监测 eslint,单元测试 jest,等等。那么有没一个框架能讲这些全家桶集成起来,默认提供一些配置,这样使用起来就会方便许多了。
今天,就为大家介绍一块满足需求的框架 umi.js。

2,什么是 umi.js

umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。它通过约定、自动生成代码和解析代码等方式来辅助开发,减少我们开发者的代码量。集成了 react 常用的一些第三方框架。

3,umi 的优点有哪些

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

4,使用 umi

4.1 安装 umi

npm install -g umi

// 使用 yarn
yarn global add umi

4.2 创建项目

先找个地方建个空目录

mkdir myapp && cd myapp

然后通过官方工具创建项目

yarn create @umijs/umi-app

安装依赖

yarn install

启动项目

yarn start

启动后就可以在浏览器访问了。

4.3 动态路由

这个动态路由用起来比较方便,在pages目录下面新建a.jsx,那么 umi 会自动添加对应的路由,无需手动配置路由。当然,umi 也支持手动配置路由。

4.4 Mock 数据

Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。

Umi 约定 /mock 文件夹下所有文件为 mock 文件。

.
├── mock
    ├── api.ts
    └── users.ts
└── src
    └── pages
        └── index.tsx

官方支持的写法

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },
  // GET 可忽略
  '/api/users/1': { id: 1 },
  // 支持自定义函数,API 参考 express@4
  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  },
}
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消