umi 入门和一些使用心得

简单介绍一句

umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架
默认开启约定式路由
按需加载配置

更详细的介绍…

抄一张架构图过来

Alt

快速上手

首先得有 node,并确保 node 版本是 8.10 或以上。

$ node -v
8.1x

使用npm 或者 yarn

yarn global add umi 
npm -g install umi

// then 创建文件夹并进入文件夹
mkdir appname && cd appname
// 创建页面
umi g page index

umi g 是 umi generate 的别名,可用于快速生成 component、page、layout 等,并且可在插件里被扩展,比如 umi-plugin-dva 里扩展了 dva:model,然后就可以通过 umi g dva:model foo 快速 dva 的 model。

启动本地服务

umi dev

推荐项目参考

antd-admin
antd-admin 项目页面展示

项目结构

├── /dist/           # 
  • 1
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
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 中配置路由权限的步骤。通过上述配置,我们可以实现简单的路由权限控制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值