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

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

下载源码求知小风 · 真仙发布于2019-07-25新课程

下一集>>

你会学到什么知识？

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

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
}

35 条回复

netNowork · 大乘 #1 2019-07-25

冲啊学啊!!!!
lolotang · 元婴 #2 2019-07-25

终于开始了
netNowork · 大乘 #3 2019-07-25

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

i18n可以考虑直接用官方提供的命令直接删除 npm run i18n-remove
国内的项目基本都用不上
lolotang · 元婴 #5 2019-07-25

删除之后就变这样了
lolotang · 元婴 #6 2019-07-25

最后把页面中引入的SelectLang组件删掉
netNowork · 大乘 #7 2019-07-25

官方在v2 版本做了一个开关的,所以觉得v4 版本应该也是有开关的吧
求知小风 · 真仙 #8 2019-07-25

对 netNowork · 大乘 #10 回复

官方在v2 版本做了一个开关的,所以觉得v4 版本应该也是有开关的吧
netNowork · 大乘 #9 2019-07-25

对求知小风 · 真仙 #10 回复

您可以设置一下反正我这边设置了,并且重新 start 页面右上角都还有 i18n 的选择.!
求知小风 · 真仙 #10 2019-07-25

对 netNowork · 大乘 #10 回复

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

嗯，那到时再说吧
lolotang · 元婴 #11 2019-07-25

开关试过确实没用，全局搜索SelectLang找到引入这个组件的地方删掉，右上角的选项就没了
求知小风 · 真仙 #12 2019-07-25

对 lolotang · 元婴 #10 回复

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

确实是的，那个 enable 开关是没用的，源码没任何体现
黄金雨 · 合体 #13 2019-07-25

对 lolotang · 元婴 #10 回复

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

貌似删除官方命令改成了 yarn run uni18n ，https://github.com/ant-design/ant-design-pro/pull/4814
求知小风 · 真仙 #14 2019-07-25

这个有些尴尬
求知小风 · 真仙 #15 2019-07-25

https://github.com/ant-design/ant-design-pro/issues/4602
lolotang · 元婴 #16 2019-07-25

对黄金雨 · 合体 #10 回复

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

更新了最新的版本试了下，package.json文件里还是这个命令，查看源码里面好像也是这个，不知道他这个pr有没有进来
lolotang · 元婴 #17 2019-07-25

对黄金雨 · 合体 #10 回复

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

另外官方文档还是这个没变
netNowork · 大乘 #18 2019-07-25

还有一个方法是把ui层直接给搞了
我用过一个方法
Ming · 真仙 #19 2019-08-10

windows yarn create umi 报错怎么回事。
求知小风 · 真仙 #20 2019-08-10

对 Ming · 真仙 #10 回复

windows yarn create umi 报错怎么回事。

你可以换个终端试下 cmder 或 git 的终端，好一些
ZuhuaLiu · 元婴 #21 2019-08-22

对 Ming · 真仙 #10 回复

windows yarn create umi 报错怎么回事。

我也是这个错误，你怎么解决的
Ming · 真仙 #22 2019-08-31

我就 create-umi 将就着用了。。。。
liquid · 大乘 #23 2019-09-09

好东西！！！！
wangyinwei1 · 真仙 #24 2019-10-20

umi最近版本有个功能插件的开发给我们出个教程呗
求知小风 · 真仙 #25 2019-10-20

对 wangyinwei1 · 真仙 #10 回复

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

嗯嗯，后面计划
wangyinwei1 · 真仙 #26 2019-10-31

为什么ts这个不会报错，umi开发环境还是通过了。是不是要开启什么？
wangyinwei1 · 真仙 #27 2019-10-31

umi是编译ts就是不会报错的是吗？必须要配合vscode来编写吗
求知小风 · 真仙 #28 2019-10-31

对 wangyinwei1 · 真仙 #10 回复

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

只是推荐用 vscode 的，别的也应该可以的
求知小风 · 真仙 #29 2019-10-31
对 wangyinwei1 · 真仙 #10 回复

umi是编译ts就是不会报错的是吗？必须要配合vscode来编写吗
``
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 2019-10-31

对

wangyinwei1 · 真仙 #10 回复

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 · 真仙 #31 2019-10-31

请问你这个是vim插件吗？对了你的vim检查ts的插件叫什么
求知小风 · 真仙 #32 2019-10-31

对 wangyinwei1 · 真仙 #10 回复

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

不是 vim 的呀，是 vscode ，vim 不适合写 ts，我觉得，所以学 ts 我没用 vim ，上面那个只是 vscode 的 vim 模拟器，因为我习惯了 vim 模式
wangyinwei1 · 真仙 #33 2019-10-31

vscode 的 vim 模拟器是什么推荐下好吗？我也习惯了vim
求知小风 · 真仙 #34 2019-10-31

对 wangyinwei1 · 真仙 #10 回复

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

74th.vimStyle 这个呀在插件里搜下 vim，找个喜欢的
wangmingyuan · 练虚 #35 2020-01-06

打卡开始学习