剧场模式
首页前后端分离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
}

39 条回复
  • 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

加微信(qiuzhi99666)入群官方服务号
随机课程
React & Redux & React-Router & Nodejs 实战 crud 项目

React & Redux & React-Router & Nodejs 实战 crud 项目

18 个视频1 小时 54 分钟中级

Pro¥ 139.00¥ 111.20

Redux已完结

课程目录

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 完结

学员(606)
喻工 · 元婴协成 · 大乘罗志勃 · 真仙Lon · 元婴liuxiaofeng · 大乘小猪佩奇 · 真仙winstars · 元婴代码小超人 · 大乘问飞 · 大乘飞 · 太乙YY · 元婴yaolaoer · 元婴
最新动态
喻工 · 元婴学习到了8:12
协成 · 大乘学习到了0:45
罗志勃 · 真仙学习到了8:12
Lon · 元婴学习到了0:00
liuxiaofeng · 大乘学习到了2:13
统计信息
    学员: 16448
    视频数量: 968
    帖子数量: 414

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:126

Top