剧场模式
首页前后端分离Ant DesignUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程

UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #1 开始玩起来

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

你会学到什么知识?

  • antd 入门
  • antd 修改 Logo, Footer 等
  • 了解布局,及使用
  • 使用区块
  • 区块与菜单
  • 使用 umi 插件
  • 国际化(关闭国际化)
  • 注册功能(后端原理)
  • dva 相关知识
  • dva 结合 antd 从零开始写页面
  • antd Form(表单组件)
  • 手机验证码使用及原理
  • 图形验证码使用及原理
  • 错误处理(状态码处理)
  • 本地持久化
  • json web token 使用
  • 登入登出功能
  • umi-request 使用
  • 请求外部服务器地址处理
  • umi-request 异常处理
  • 菜单权限控制
  • 权限安全性及处理
  • 实战视频管理(各种坑处理)

Ant design pro v4 & ant design v3

https://www.qiuzhi99.com/playlists/react-antd-admin.html Ant Design Pro 企业级后台实战(73 个视频)

https://www.qiuzhi99.com/playlists/umi.html 轻松学 UmiJS 视频教程(35 个视频)

https://www.qiuzhi99.com/movies/umi/733.html 轻松学 UmiJS 视频教程 #25 如何快速安装区块

https://www.qiuzhi99.com/playlists/typescript.html 诱人的 TypeScript 视频教程(69 个视频)

https://github.com/ant-design

https://github.com/ant-design/ant-design-pro

https://github.com/hfpp2012/redux-login

https://github.com/hfpp2012/hello-antd-pro

https://code.visualstudio.com/

https://juejin.im/post/5b99c9ece51d450e51625630

# 管理员账号与密码
hfpp2012 12345678
npm set registry https://r.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像

## 以下选择添加
npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass # node-sass 二进制包镜像
npm set electron_mirror https://npm.taobao.org/mirrors/electron/ # electron 二进制包镜像
npm set puppeteer_download_host https://npm.taobao.org/mirrors # puppeteer 二进制包镜像
npm set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver # chromedriver 二进制包镜像
npm set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver # operadriver 二进制包镜像
npm set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs # phantomjs 二进制包镜像
npm set selenium_cdnurl https://npm.taobao.org/mirrors/selenium # selenium 二进制包镜像
npm set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector # node-inspector 二进制包镜像

npm cache clean --force # 清空缓存

npm set selenium_cdnurl=http://npm.taobao.org/mirrors/selenium
npm set node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector
{
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    "editor.formatOnSave": true,
    "window.zoomLevel": 0,
    "editor.lineHeight": 0,
    "editor.fontSize": 13,
    "terminal.integrated.fontSize": 13
}

47 条回复
  • netNowork · 太乙
    netNowork · 太乙 #1

    冲啊 学啊!!!!

  • lolotang · 元婴
    lolotang · 元婴 #2

    终于开始了

  • netNowork · 太乙
    netNowork · 太乙 #3

    提几个点 比如 v4 版本的foot 变得更加不好修改了,i18n 如何关闭,动态菜单的如何配置, 配置了动态菜单之后如何设置第一个默认页面,

  • lolotang · 元婴
    lolotang · 元婴 #4

    i18n可以考虑直接用官方提供的命令直接删除 npm run i18n-remove
    国内的项目基本都用不上

  • lolotang · 元婴
    lolotang · 元婴 #5


    删除之后就变这样了

  • lolotang · 元婴
    lolotang · 元婴 #6

    最后把页面中引入的SelectLang组件删掉

  • netNowork · 太乙
    netNowork · 太乙 #7

    官方在v2 版本做了一个开关的,所以觉得v4 版本应该也是有开关的吧

  • 求知小风 · 元婴

  • netNowork · 太乙
    netNowork · 太乙 #9

    您可以设置一下反正我这边设置了,并且重新 start 页面右上角都还有 i18n 的选择.!

  • 求知小风 · 元婴
    求知小风 · 元婴 #10

    嗯,那到时再说吧

  • lolotang · 元婴
    lolotang · 元婴 #11

    开关试过确实没用,全局搜索SelectLang找到引入这个组件的地方删掉,右上角的选项就没了

  • 求知小风 · 元婴
    求知小风 · 元婴 #12

    确实是的,那个 enable 开关是没用的,源码没任何体现

  • 黄金雨 · 金仙
    黄金雨 · 金仙 #13

    貌似删除官方命令改成了 yarn run uni18n ,https://github.com/ant-design/ant-design-pro/pull/4814

  • 求知小风 · 元婴
    求知小风 · 元婴 #14

    这个有些尴尬

  • 求知小风 · 元婴
  • lolotang · 元婴
    lolotang · 元婴 #16


    更新了最新的版本试了下,package.json文件里还是这个命令,查看源码里面好像也是这个,不知道他这个pr有没有进来

  • lolotang · 元婴
    lolotang · 元婴 #17


    另外官方文档还是这个没变

  • netNowork · 太乙
    netNowork · 太乙 #18

    还有一个方法是把ui层直接给搞了
    我用过一个方法

  • Ming · 真仙
    Ming · 真仙 #19

    windows yarn create umi 报错怎么回事。

  • 求知小风 · 元婴
    求知小风 · 元婴 #20

    你可以换个终端试下 cmder 或 git 的终端,好一些

  • ZuhuaLiu · 元婴
    ZuhuaLiu · 元婴 #21

    我也是这个错误,你怎么解决的

  • Ming · 真仙
    Ming · 真仙 #22

    我就 create-umi 将就着用了。。。。

  • liquid · 大乘
    liquid · 大乘 #23

    好东西!!!!

  • wangyinwei1 · 道祖
    wangyinwei1 · 道祖 #24

    umi最近版本有个功能插件的开发给我们出个教程呗

  • 求知小风 · 元婴
    求知小风 · 元婴 #25

    嗯嗯,后面计划

  • wangyinwei1 · 道祖
    wangyinwei1 · 道祖 #26


    为什么ts这个不会报错,umi开发环境还是通过了。是不是要开启什么?

  • wangyinwei1 · 道祖
    wangyinwei1 · 道祖 #27

    umi是编译ts就是不会报错的是吗?必须要配合vscode来编写吗

  • 求知小风 · 元婴
    求知小风 · 元婴 #28

    只是推荐用 vscode 的,别的也应该可以的

  • 求知小风 · 元婴
    求知小风 · 元婴 #29

    ``
    code --install-extension 74th.vimStyle
    code --install-extension Atishay-Jain.All-Autocomplete
    code --install-extension bajdzis.vscode-database
    code --install-extension CoenraadS.bracket-pair-colorizer-2
    code --install-extension DiamondYuan.umi-pro
    code --install-extension dsznajder.es7-react-js-snippets
    code --install-extension eamodio.gitlens
    code --install-extension esbenp.prettier-vscode
    code --install-extension formulahendry.auto-close-tag
    code --install-extension formulahendry.auto-rename-tag
    code --install-extension fosshaas.fontsize-shortcuts
    code --install-extension huanent.fix-ctrl-space
    code --install-extension kumar-harsh.graphql-for-vscode
    code --install-extension overtrue.miniapp-helper
    code --install-extension qiu8310.minapp-vscode
    code --install-extension Shan.code-settings-sync
    code --install-extension steoates.autoimport
    code --install-extension TabNine.tabnine-vscode
    code --install-extension wix.vscode-import-cost

    
    这是我安装的插件,不过应该跟插件无关的
    
  • 求知小风 · 元婴
    求知小风 · 元婴 #30
    code --install-extension 74th.vimStyle
    code --install-extension Atishay-Jain.All-Autocomplete
    code --install-extension bajdzis.vscode-database
    code --install-extension CoenraadS.bracket-pair-colorizer-2
    code --install-extension DiamondYuan.umi-pro
    code --install-extension dsznajder.es7-react-js-snippets
    code --install-extension eamodio.gitlens
    code --install-extension esbenp.prettier-vscode
    code --install-extension formulahendry.auto-close-tag
    code --install-extension formulahendry.auto-rename-tag
    code --install-extension fosshaas.fontsize-shortcuts
    code --install-extension huanent.fix-ctrl-space
    code --install-extension kumar-harsh.graphql-for-vscode
    code --install-extension overtrue.miniapp-helper
    code --install-extension qiu8310.minapp-vscode
    code --install-extension Shan.code-settings-sync
    code --install-extension steoates.autoimport
    code --install-extension TabNine.tabnine-vscode
    code --install-extension wix.vscode-import-cost
    
  • wangyinwei1 · 道祖
    wangyinwei1 · 道祖 #31

    请问你这个是vim插件吗?对了你的vim检查ts的插件叫什么

  • 求知小风 · 元婴
    求知小风 · 元婴 #32

    不是 vim 的呀,是 vscode ,vim 不适合写 ts,我觉得,所以学 ts 我没用 vim ,上面那个只是 vscode 的 vim 模拟器,因为我习惯了 vim 模式

  • wangyinwei1 · 道祖
    wangyinwei1 · 道祖 #33

    vscode 的 vim 模拟器是什么推荐下好吗?我也习惯了vim

  • 求知小风 · 元婴
    求知小风 · 元婴 #34

    74th.vimStyle 这个呀 在插件里搜下 vim,找个喜欢的

  • wangmingyuan · 练虚
    wangmingyuan · 练虚 #35

    打卡开始学习

  • 锦恒科技 · 真仙
    锦恒科技 · 真仙 #36

    怎么跳转到自己之前看的

  • 求知小风 · 元婴
    求知小风 · 元婴 #37

    个人中心里有个观看记录

  • 林锴 · 金仙
    林锴 · 金仙 #38

    这个课程是基于 antd pro v4 版本的吗?

  • 求知小风 · 元婴
    求知小风 · 元婴 #39

    是的 Ant design pro v4 & ant design v3

  • afr751116 · 大罗
    afr751116 · 大罗 #40

    这个问题发这里估计不太合适,但找不到其它地方发了。
    我想请问下的是 Ant design pro v4 主要提供了界面、菜单样式给我们,像通用的注册、登陆页面就不用我们再重复做了对吧。

  • 求知小风 · 元婴
    求知小风 · 元婴 #41

    不用写页面,不过还是要你套后端的,毕竟每个人的后端不同

  • afr751116 · 大罗
    afr751116 · 大罗 #42

    2、像我需要一个页面,上面有添加、删除、编缉 用户,包括这个页面的展示,这些就需要自己从 Ant design 组件库里找适合的组件来导入,自己从0开始写这个页面了对吗?
    还是说我理解错的,Pro基本都有半成品,改造就好?

  • afr751116 · 大罗
    afr751116 · 大罗 #43

    2、像我需要一个页面,上面有添加、删除、编缉 用户,包括这个页面的展示,这些就需要自己从 Ant design 组件库里找适合的组件来导入,自己从0开始写这个页面了对吗?
    还是说我理解错的,Pro基本都有半成品,改造就好?

  • 求知小风 · 元婴
    求知小风 · 元婴 #44

    有半成品,可以从组件库导入

  • afr751116 · 大罗
    afr751116 · 大罗 #45

    那这样的思路就还是:你要什么页面,从Pro的区块上找接近的页面,然后下载,删掉不要的东西,再导入你想要的组件,组合新的页面。 如果区块上连半成品都没有,就下载个空页面,再自己一点一点导入组件组成页面是吗

  • 求知小风 · 元婴
    求知小风 · 元婴 #46

    嗯,是的

  • afr751116 · 大罗
    afr751116 · 大罗 #47

    请问下,你这站内哪个视频是从Pro下载空页面,然后一块一块搭起来页面的教程?

官方服务号
随机课程
最全的 ES6 入门指南视频教程

最全的 ES6 入门指南视频教程

0 个视频0 分钟入门

全部免费

其他还未更新

课程目录

FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #1 开始玩起来

2FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #2 了解项目源码并尝试修改

3FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #3 继续了解项目源码并修改代码

4FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #4 如何修改 footer 及其原理

5FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #5 关于 footer 和 layout

6ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #6 如何好好利用 ant-design-pro-layout

7ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #7 如何下载和使用区块

8ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #8 为什么下载区块后会添加菜单

9ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #9 umi-plugin-pro-block-ts

10ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #10 删除国际化 i18n part 1

11ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #11 删除国际化 i18n part 2

12ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #12 用户注册的 block

13ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #13 让用户注册工作起来

14ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #14 注册的流程理解

15ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #15 准备好 API

16ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #16 对接好后端的注册功能

17ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #17 表单的前端验证与后端验证

18ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #18 后端的数据验证与前端的结合

19ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #19 自己写一个真实项目的注册页面 - 手机验证码 - 图形验证码

20ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #20 注册表单

21ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #21 表单与 TypeScript

22ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #22 注册表单 - connect - dispatch

23ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #23 实现注册功能并显示验证出错信息

24ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #24 详解注册页面手机验证码

25ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #25 注册页面手机验证码处理完成

26ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #26 手机验证码的原理(后端)

27ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #27 注册页面显示图形验证码

28ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #28 注册页面图形验证码的原理

29ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #29 注册页面提交失败时图形验证码重新刷新

30FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #30 注册页面成功跳转

31ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #31 用 localStorage 存储 jwt

32FreeUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #32 重构代码,封装 request

33ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #33 登录页面

34ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #34 完成登录

35ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #35 登录权限验证 - 发送请求带上头信息

36ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #36 登录权限验证 - umi-request 异常处理程序

37ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #37 解决 umi-request 的 extend 关于 headers 的问题

38ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #38 显示个人用户信息

39ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #39 菜单权限控制显示

40ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #40 通过修改 getAuthority 方法利用 jwt 显示正确的菜单权限

41ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #41 刷新当前权限

42ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #42 其他的权限方法 - 从远程服务器获取菜单

43ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #43 权限验证的安全性(准备进入下一阶段)

44ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #44 实战 - 视频管理

45ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #45 实战 - 视频管理 - 视频列表

46ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #46 实战 - 视频管理 - 视频列表 - 发送请求获得远程的数据

47ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #47 实战 - 视频管理 - 视频列表 - 显示列表数据

48ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #48 实战 - 视频管理 - 视频列表 - 修复列表数据

49ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #49 实战 - 视频管理 - 视频列表 - 搜索列表

50ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #50 实战 - 视频管理 - 搜索 - 使用 qs 处理 umi-request 提交参数的问题

51ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #51 实战 - 视频管理 - 搜索 - 处理 moment 的时间问题

52ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #52 实战 - 视频管理 - 完成分页

53ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #53 实战 - 视频管理 - 添加视频

54ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #54 实战 - 视频管理 - 添加视频 - 发送请求

55ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #55 实战 - 视频管理 - 添加视频 - 处理完成

56ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #56 实战 - 视频管理 - 错误处理

57ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #57 实战 - 视频管理 - 详情页面

58ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #58 实战 - 视频管理 - 完成详情页面

59ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #59 实战 - 视频管理 - 删除视频

60ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #60 实战 - 视频管理 - 添加视频

61ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #61 实战 - 视频管理 - 添加视频 part 2

62ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #62 实战 - 视频管理 - 添加视频 part 3

63ProUmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程 #63 完结

学员(788)
忈 · 元婴小川 · 元婴undefined · 大乘maxmilia · 道祖噗通~ · 元婴littlefish · 元婴穿越时间与空间的旅行家 · 道祖万旗 · 大乘wangchuanxiang · 元婴Tommy_Yang · 元婴arthur · 元婴吴长煌 · 合体
最新动态
忈 · 元婴学习到了7:48
小川 · 元婴学习到了6:44
undefined · 大乘学习到了8:12
maxmilia · 道祖学习到了3:18
噗通~ · 元婴学习到了0:00
统计信息
    学员: 17805
    视频数量: 1049
    帖子数量: 427

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

Top