剧场模式
首页前后端分离Ant DesignAnt Design Pro v4 基于角色的权限访问控制实战教程

Ant Design Pro v4 基于角色的权限访问控制实战教程 #3 使用 umi ui 创建项目

求知小风 · 元婴发布于新课程
0

大家好

欢迎来到

求知久久,我是随风

我们接着上一节来继续讲解

我们上一节已经把这个项目创建好了

它是真正跑在这个 8000 端口上的

这是一个后台项目

但是它也开了另一个端口

跑在这个 3000 端口上

它叫做这个 umi ui, 上一节

我们是使用一个命令来创建这个项目的

我们回顾一下,我们使用的命令是这个 yarn create umi

但是呢

我们这节课要讲下怎么来使用这个 umi UI 创建这个项目

我们就来探索一下这个 umi ui,那么第一步

我们就来看一下它的文档

https://umijs.org/zh/guide/umi-ui.html#%F0%9F%91%B7-%E5%BC%80%E5%8F%91%E8%80%85

在这个 umi 的官方文档中

如何要使用的话很简单

使用这个 umi ui 这个命令就好了

那么我们这一节呢

主要就是用 umi ui 来创建一个项目

我们随便进到一个目录中来

我们来尝试一下,umi ui

它就会跑下这个 3000 多的端口

就是一个这样的界面

那么我们可以在这里点一下这个 "创建"

然后呢

这里有个应用名称

我们就新增一下,client

然后呢

点一下 “下一步”

它这里呢,可以选择这个 antd design pro 的模板,就跟我们之前这个命令差不多的

就是

我们这里是 antd pro 的,选这个就好了。

使用的是 TypeScript,然后这个包管理呢?

这里我推荐使用的是这个 npm 或者说是 yarn

当然这些都可以用的吧

我们来试一下吧

点一下 “完成”

这里就会进行一个初始化的项目

而且会安装依赖

那么

我们就可以来看一下这个 umi ui 的工具就是用它来代替命令行

这是它的一个好处

就是可以用它来代替命令行

可视化的一个图形化工具

但是我们使用命令行也是一样的

就像上一节那样

我们是使用命令行来创建的,效果是一样的

我们这个 umi ui

它会在浏览器中跑一个项目

它就像一个图形化工具一样,代替

这个命令行的,我们可以用它来创建这个项目的,就是我们可以不用记忆一堆命令对吧

只要使用这个 umi ui 就可以了

稍等一下

然后呢

它已经运行完成了

已经把这个项目创建成功了

弹出这个窗口

我们点下OK吧

等下 ok 就好的

它会重新刷新

它会打开这个项目

等一下,它会打开对吧

这个打开的项目

它那个内容就跟我们上一节创建的项目的内容差不多的

我们可以用这个编辑工具打开来

它会生成这个项目的,antd pro 的项目

跟我们之前那个它的源码结构差不多的,只是换了一种方式而已

这样我们也可以把它运行起来

我们来看一下

任务这里吧

启动它的

它就会运行 webpack 这个

编译命令

这里已经运行成功了

它又会开启一个端口

跑在浏览器上

这个项目就跟这个 8000 端口的是差不多的吧

好,我们这一节就来讲一下使用这个 umi ui

它是可以创建这个项目的

相关资源

https://umijs.org/zh/guide/umi-ui.html#%F0%9F%91%B7-%E5%BC%80%E5%8F%91%E8%80%85

1 条回复
加微信(qiuzhi99666)入群官方服务号
随机课程
React 进阶提高 - 技巧篇 - 第 1 季

React 进阶提高 - 技巧篇 - 第 1 季

33 个视频3 小时 29 分钟中级

Pro¥ 128.00¥ 102.40

React已完结

课程目录

1FreeAnt Design Pro v4 基于角色的权限访问控制实战教程 #1 课程介绍(带中英字幕)

2FreeAnt Design Pro v4 基于角色的权限访问控制实战教程 #2 初始化项目

FreeAnt Design Pro v4 基于角色的权限访问控制实战教程 #3 使用 umi ui 创建项目

4FreeAnt Design Pro v4 基于角色的权限访问控制实战教程 #4 使用 umi ui 导入已创建好的项目并讲解 umi ui 的使用

5ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #5 登录页面讲解

6ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #6 接入后端的服务器 API

7ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #7 登录功能报错与跳转

8ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #8 获取当前用户的信息 - currentUser

9ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #9 保存 jwt token 成功登录 - saveCurrentUser

10ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #10 登录出错信息处理

11ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #11 显示个人头像和用户名

12ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #12 jwt token 过期了怎么办?- 分析原理

13ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #13 菜单没有显示出来怎么办?- 权限讲解

14ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #14 后端修改权限之后前端没有更新到最新的权限

15ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #15 第二部分 - 授权管理 - 员工管理

16ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #16 pro blocks 更新到 antd v4 版本,icon 写法改变了

17ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #17 要升级到 ant design@4 吗?

18ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #18

19ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #19 员工列表 part 1(已经使用了 antd@4)

20ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #20 员工列表 part 2

21ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #21 添加员工

22ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #22 修改员工

23ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #23 角色管理 - 添加角色 - 修改角色

24ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #24 权限管理 - 添加权限 - 修改权限

25ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #25 完成分页 - 前后端

26ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #26 给角色分配权限 part 1 - ^_^

27ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #27 给角色分配权限 part 2 - ^_^

28ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #28 给角色分配权限 part 3 - ^_^

29ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #29 给员工分配多个角色

30ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #30 权限验证

31ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #31 完善所有权限

32ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #32 有权限才能显示操作按钮 - part 1

33ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #33 有权限才能显示操作按钮 - part 2

34ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #34 有权限才能显示操作按钮 - part 3

35ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #35 给权限分组

36ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #36 远程获取动态菜单 part 1

37ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #37 远程获取动态菜单 part 2

38ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #38 菜单管理 - 后端

39ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #39 菜单管理 - 前端

40ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #40 菜单层级关系

41ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #41 完善菜单

42ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #42 下拉选择菜单 part 1

43ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #43 下拉选择菜单 part 2

44ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #44 下拉选择菜单 part 3

45ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #45 解决更新菜单的问题

46ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #46 远程返回动态菜单

47ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #47 菜单与权限绑定

48ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #48 根据权限获取相应的菜单

49ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #49 最终完成菜单

50ProAnt Design Pro v4 基于角色的权限访问控制实战教程 #50 无限级菜单 - 完结

学员(158)
BeYoNd丶 · 大乘Dcdc · 大乘大圣收了神通吧 · 元婴爱优美 · 元婴宏 · 道祖Mars.Liang · 道祖思航💗 · 大乘飘临 · 练虚欢乐马 · 太乙o欧洋 · 道祖mrj · 大罗xiejun · 元婴
最新动态
BeYoNd丶 · 大乘学习到了7:24
Dcdc · 大乘学习到了2:25
大圣收了神通吧 · 元婴学习到了0:13
爱优美 · 元婴学习到了0:00
宏 · 道祖学习到了7:24
统计信息
    学员: 17643
    视频数量: 1035
    帖子数量: 427

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:116

Top