简介:Ant Design Pro是阿里巴巴旗下蚂蚁金服开源的中台前端/设计解决方案,官网。

一、下载安装

1.1 前序准备

你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd,提前了解和学习这些知识会非常有帮助。

1.2 下载

新建一个空的文件夹作为项目目录,并在目录下执行:

yarn create umi

或者

npm create umi

推荐使用npm方式安装,因为后面使用git管理时,如果在webstorm中提交代码可能会出现问题。(但是有一个问题就是npm方式下载速度很慢,原因和解决方法自己去找,这里不详细介绍)

1.2.1选择 ant-design-pro

? Select the boilerplate type (Use arrow keys)
> ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.app             - Create project with a simple boilerplate, support typescript.block           - Create a umi block.library         - Create a library with umi.plugin          - Create a umi plugin.

1.2.2选择Pro V4:

? � Be the first to experience the new umi@3 ? (Use arrow keys)Pro V5
> Pro V4

1.2.3选择JavaScript:

? � Which language do you want to use? (Use arrow keys)
> TypeScriptJavaScript

1.2.4simple和complete的区别:(这里我选择simple)

? � Do you need all the blocks or a simple scaffold? (Use arrow keys)
> simplecomplete

simple:只有基础功能,包含的组件和功能较少。选择simple后下一步还要选择ant的版本。

complete:包含的组件和功能较多,与线上示例:https://preview.pro.ant.design/dashboard/analysis完全一致。选择complete后默认使用的ant版本是4,不用再选择ant版本。

1.2.5 选择antd@4:

? � Time to use better, faster and latest antd@4! (Use arrow keys)
> antd@4antd@3

经过上述几步操作后就开始下载Ant Design Pro项目了,完整的操作过程。

H:\antcomplete>npm create umi
? Select the boilerplate type ant-design-pro
? � Be the first to experience the new umi@3 ? Pro V4
? � Which language do you want to use? JavaScript
? � Do you need all the blocks or a simple scaffold? simple
? � Time to use better, faster and latest antd@4! antd@4
Cloning into 'H:\antcomplete'...
remote: Enumerating objects: 188, done.
remote: Counting objects: 100% (188/188), done.
remote: Compressing objects: 100% (173/173), done.
Rremote: Total 188 (delta 21), reused 67 (delta 8), pack-reused 0
Receiving objects: 100% (188/188), 296.12 KiB | 35.00 KiB/s, done.Resolving deltas: 100% (21/21), done.
> � clone success
> [Sylvanas] Prepare js environment...
> [JS] Clean up...
> Clean up...
✨ File Generate DoneH:\antcomplete>

1.2.6下载完成后在antcomplete目录下会共有16个文件及文件夹。(此数量仅代表编写此文档时下载的数量)

1.2.7安装依赖:

yarn

npm install

推荐使用npm install,原因同上。

1.2.8启动

npm start

​​​​​​​

​​​​​​​

Ant Design Pro V4下载运行相关推荐

  1. Ant Design Pro v4 is Here

    Ant Design Pro v4 is Here 距离 Pro 的上个版本发布已经过去了 8 个月,Pro 也进行了许多的迭代,但是大部分更新仍然以修复 bug 为主.在此期间我们遇到了许多使用 P ...

  2. UmiJS TypeScript Ant Design Pro v4 从零开始实战教程(63 个视频)

    UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程(63 个视频) Antd Pro 是国内最流行的前端后台框架,使用它可以轻易搭建一个超级 ...

  3. ant design pro v4 从后台服务器请求菜单,思路,具体代码及坑

    原文见:https://www.yuque.com/asuncat/htn2dd/wgnx0u 版本信息 ant design pro : v4.2.2 umi: v3.2.14 pro-layout ...

  4. Ant Design Pro V4 入门到实战手册【2020】

    前言 第一章 初识 Ant Design Pro 1. 调整 Ant Design Pro 基本配置 2. 浅析 Ant Design Pro 工作流程 第二章 布局和路由 1. 复杂页面布局的&qu ...

  5. Ant Design Pro模板无多标签页解决方案

    白嫖了无尽岁月,我也来写个博客.希望能帮到你! 网上一些方案都是把官方模板替换成自己写的.本人的方案是在模板的基础上进行添砖加瓦,理解起来更容易! 解决思路是: 记录页面切换时的路由(onPageCh ...

  6. Ant design pro v4-服务器菜单和路由权限控制

    要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...

  7. ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)

    [前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...

  8. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...

  9. ant design pro v5 总结

    Ant Design Pro v5 使用心得 相比V4,V5到底强在哪? 如何更改 title图标和加载时的页面? defaultSettings中菜单的几种模式及主题等配置 国际化 request ...

最新文章

  1. 漫话:如何给女朋友解释为什么 Java 中1000==1000为 false,而100==100为 true?
  2. Zabbix监控网络设备日志文件及字段报警
  3. 性能翻倍 IBM借DS3500拓中低端存储市场
  4. MongoDB入门简单介绍
  5. html多语言国际化,gMIS吉密斯i18n多语言国际化更新
  6. 如何覆盖 SAP Spartacus 默认的 css style
  7. 调试opencv程序显示应用程序无法正常启动,0xc000007b
  8. IOS内购流程从0-1手把手教会
  9. Gentoo解决Windows系统txt文本中文乱码问题
  10. html_jQuery_ajax
  11. mysql 多重循环_SQL循环语句 详解
  12. Web服务器(Apache)与Servlet容器(Tomcat)
  13. 必须知道的python专属骚技巧25例
  14. WebRTC实时通信系列教程7 使用Socket.IO搭建信令服务器交换信息
  15. HTTP请求携带用户密码验证
  16. Excel工具类(详细版)
  17. Linux运维精华面试题
  18. 2019链塔大会暨亚洲区块链技术与应用论坛盛大召开
  19. iPad Pro 突然开不了机
  20. 续写故事demo php,一个续写故事的游戏(一)

热门文章

  1. 易语言上传文件 自动化编辑对话框并点击按钮
  2. 以太网 TCP协议交互过程中出现丢包时的解决机制,超时重传、快速重传、SACK与DSACK
  3. 23、LZ77压缩和解压
  4. LeetCode 28 Implement strStr()(实现strStr()函数)
  5. 【C++】全局变量定义在哪里合适
  6. Chrome怎么导出扩展程序(插件)为crx文件
  7. fetch请求cookie设置
  8. 大学计算机实验图灵机模型与计算机硬件,北理大学计算机实验基础 实验一_图灵机模型与计算机硬件系统虚拟拆装-实验报告.doc...
  9. 大规模优化方法(一)
  10. 程易科技祝大家新年快乐