umi入门

最新推荐文章于 2024-05-14 22:40:07 发布
最新推荐文章于 2024-05-14 22:40:07 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： react 文章标签： reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39371152/article/details/105067875
版权

umi入门

1. 什么是umi

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
在这里插入图片描述
这张图是给内部框架 Bigfish 画的，套到 Umi 上同样合适。他把大家常用的技术栈进行整理，收敛到一起，让大家只用 Umi 就可以完整 80% 的日常工作。
在这里插入图片描述
Umi 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。

2.环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

$ node -v
v10.13.0
最低0.47元/天 解锁文章
Ying_Mr
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react学习-Windows下UmiJS框架搭建
qq_42603430的博客
11-25 1080
UmiJS介绍 Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
Umi 框架
lilygg的博客
11-07 1万+
1.什么是Umi? Umi是蚂蚁金服的底层前端框架(经蚂蚁内部3000+项目验证) Umi是以'路由'为基础的企业级React框架(同时支持配置式路由和约定式路由) Umi是一个'可插拔'的企业级React框架(内部功能完全使用插件化完成) 所以 Umi 是一个蚂蚁金服底层的,以'路由'为基础的,内部功能完全使用插件化完成的 React 框架 2.如何使用Umi mkdir demo cd demo npm init -y ...
Umi 入门教程
weixin_44240581的博客
01-28 1万+
项目结构 src/.umi/ src/.umi-production/ src/**/*.test.js & *.e2e.js src/global.(j|t)sx src/global.(css|less|sass|scss) .umirc.js 和 config/config.js .env 页面跳转 Umi提供了两种跳转方式 命令式：history.push('/list') 声明式：<Link to="/list">Go to list page</Link&
umi搭建react项目
最新发布
qq_65537235的博客
05-14 312
UMI 是一个基于 React 的可扩展企业级前端应用框架，提供路由、状态管理、构建和部署等功能，可以帮助开发者快速构建复杂的单页面应用（SPA）和多页面应用（MPA）。它与 React 的关系是，UMI 构建在 React 生态系统之上，利用 React 提供的组件化开发方式和生态系统的丰富资源来进行开发。正是因为umi的优秀，为了方便开发者更加方便的使用这些插件，在我们这些插件开源的基础上，直接将他们集成到一起，打造了。让开发者直接可以通过脚手架马上获得和蚂蚁集团开发 Umi 应用一样的开发体检。
umijs有什么好处_UMI.js开发知识总结
weixin_42170790的博客
12-23 418
五分钟掌握最小知识体系本文阅读时间大概为5分钟，但是能让你了解基于UMI和DVA构建项目的最小知识体系，你可以粗略的浏览一下本文所提到的知识，在后续的讲解中都会多次重复提起，保证学习效率。由于现在前端工程化的流行，所以在学习一个新的框架时，可能会面临一些疑惑。比如拿react举例：es6特性好多啊(es5我都还没学完呢) component有三种写法(茴字的四种写法了解一下) webpack是什么...
UMI简介
山海之间
07-28 1万+
关于UMI的一些东西，概念，位置，如何处理 UMI是什么 UMI全称：Unique Molecular Identifiers。 又称分子条形码技术，是对原始样本基因组打断后的每一个片段都加上一段特有的标签序列，用于区分同一样本中成千上万的不同的片段，在后续的数据分析中可以通过这些标签序列来排除由于 DNA 聚合酶和扩增以及测序过程中所引入的错误。分子条形码通常由大约 10...
umi2-dva-antd-starter:Umi2.js和Ant Design入门
05-15
umi2-dva-antd-starter 开始使用Umi.js和Ant Design。...入门 安装依赖项。 yarn 启动开发服务器。 yarn start 精简生产。 yarn build 精打细算为发展而建设。 yarn dev 执照 麻省理工学院
umi-dva-antd-mobile-starter:Umi3.js和Ant Design Mobile入门
04-29
umi-dva-antd-mobile-starter 开始使用Umi.js和Ant Design Mobile。入门安装依赖项。 yarn 启动开发服务器。 yarn start 精简生产。 yarn build 精打细算为发展而建设。 yarn dev执照麻省理工学院
umi-next:umi的下一个版本。 （正在开发中）
03-08
umi（v3开发版） :rice_ball: 可插拔的企业级React应用程序框架。 请考虑关注该项目的作者，并考虑为该项目以显示您的 :red_heart: 和支持。 入门 去做 社区 Github问题 钉钉群 微信群 执照
umi
03-13
umi项目 入门 安装依赖项 $ yarn 启动开发服务器， $ yarn start
umi-后端
03-04
umi项目入门安装依赖项$ yarn 启动开发服务器， $ yarn startumi-后端
umi入门学习
DOM曼珠沙华的博客
04-20 2775
umi为前端开发框架 安装umi npm install umi -g [点击并拖拽以移动] 直接创建文件夹 umiProject，cd进入后直接操作： 创建页面
UmiJS介绍--快速上手（一）
eunice_sytin的博客
10-31 2万+
1.介绍 umi是一个可插拔的企业级react应用框架。umi以路由为基础的，支持类next.js的约定式路由，以及各种进阶的路由功能 umi配以完善的插件体系，覆盖从源码到构建产物的每个生命周期 umi是蚂蚁金服的底层前端框架 umi 可以简单地理解为 roadhog + 路由，思路类似 next.js/nuxt.js，辅以一套插件机制，目的是通过框架的方式简化 React 开发 2.特性 1....
React + Dva + Antd + Umi 快速入门
热门推荐
SCU_Cindy
09-06 2万+
最近一个项目用了React + Dva + Antd + Umi技术栈，现处于慢慢摸索过程中，分享出来与大家共同学习进步。 基础框架概念先知道 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。 Antd 是阿里的一套开箱即用...
react与umi
weixin_30762087的博客
09-26 1493
我们知道umi 是一个编译工具，但它同时也是一个前端框架。它对社区的 webpack，react-router 等进行的封装， 使得我们可以基于它快速搭建一个 React 项目。 第一步：安装umi 第二步：创建目录，并写入配置 在 umi 中，约定的存放页面代码的文件夹是 pages，是复数，不过我们可以添加 singular 为 true 来让 page 变为约定的文件夹。 接下来让我们...
关于umi 的配置式路由
aieraflyyyy的博客
03-29 9805
关于umi 的配置式路由 最近领导让我研究一下umi的配置式路由，在网上找了很多资料都是一笔带过。 最终找到个靠谱老哥，他详细的说明了这个配置式路由该在哪配置。 原来要把它放在.umirc.js文件里。 这里要注意一下这个component地址。 它是根据umi自动生成的router.js文件的位置来看的。 如果觉得把路由写在.umirc.js文件里不爽的话，你也可以新建个router.js...
【前端开发测试】umi 的 mock 功能
aolv3500的博客
03-30 1025
umi 里约定 mock 文件夹下的文件即 mock 文件，文件导出接口定义，支持基于 require 动态分析的实时刷新，支持 ES6 语法，以及友好的出错提示，详情参看 umijs.org。 export default { // 支持值为 Object 和 Array 'GET /api/users': { users: [1, 2] }, // GET...
Umi框架简介
xxtz0522的博客
11-03 3536
参考： https://www.jianshu.com/p/7d5ba07fe1fd
前端dvajs与umijs
点点的博客
06-24 4379
一、dvajs 开源地址：https://dvajs.com/ 1.dva dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。 2.特性 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API el...
umi权限路由_umi 入门之项目配置
05-23
在 Umi 中配置路由权限需要以下步骤： 1. 安装依赖 首先需要安装 `@umijs/plugin-access` 插件，该插件提供了路由权限控制的功能。 ```bash npm install @umijs/plugin-access --save-dev ``` 2. 配置插件 在 `.umirc.js` 或 `config/config.js` 文件中添加插件配置： ```js export default { plugins: [ ['@umijs/plugin-access', { access: 'src/access.js', }], ], }; ``` 3. 编写权限控制文件 在 `src` 目录下创建 `access.js` 文件，该文件用于定义路由权限控制规则。 ```js export default function access(initialState) { const { currentUser } = initialState || {}; return { canReadPage1: currentUser && currentUser.role === 'admin', canReadPage2: currentUser && currentUser.role === 'user', }; } ``` `access.js` 文件需要导出一个函数，并接受一个参数 `initialState`，该参数包含了当前用户的信息等状态。函数需要返回一个对象，对象中定义了每个路由的访问权限。 在上面的例子中，我们定义了两个权限：`canReadPage1` 和 `canReadPage2`，分别表示访问页面1和页面2的权限。如果用户拥有相应的权限，即 `currentUser.role` 等于 `admin` 或 `user`，则返回 `true`，否则返回 `false`。 4. 配置路由 在路由配置中使用 `access` 属性指定路由访问权限： ```js export default [ { path: '/page1', component: '@/pages/Page1', access: 'canReadPage1', }, { path: '/page2', component: '@/pages/Page2', access: 'canReadPage2', }, ]; ``` 在上面的例子中，我们将 `access` 属性分别指定为 `canReadPage1` 和 `canReadPage2`，表示只有当用户拥有对应的权限时才能访问对应的路由。 以上就是在 Umi 中配置路由权限的步骤。通过上述配置，我们可以实现简单的路由权限控制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值