Ant Design Pro V4下载运行
简介: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下载运行相关推荐
- Ant Design Pro v4 is Here
Ant Design Pro v4 is Here 距离 Pro 的上个版本发布已经过去了 8 个月,Pro 也进行了许多的迭代,但是大部分更新仍然以修复 bug 为主.在此期间我们遇到了许多使用 P ...
- UmiJS TypeScript Ant Design Pro v4 从零开始实战教程(63 个视频)
UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程(63 个视频) Antd Pro 是国内最流行的前端后台框架,使用它可以轻易搭建一个超级 ...
- ant design pro v4 从后台服务器请求菜单,思路,具体代码及坑
原文见:https://www.yuque.com/asuncat/htn2dd/wgnx0u 版本信息 ant design pro : v4.2.2 umi: v3.2.14 pro-layout ...
- Ant Design Pro V4 入门到实战手册【2020】
前言 第一章 初识 Ant Design Pro 1. 调整 Ant Design Pro 基本配置 2. 浅析 Ant Design Pro 工作流程 第二章 布局和路由 1. 复杂页面布局的&qu ...
- Ant Design Pro模板无多标签页解决方案
白嫖了无尽岁月,我也来写个博客.希望能帮到你! 网上一些方案都是把官方模板替换成自己写的.本人的方案是在模板的基础上进行添砖加瓦,理解起来更容易! 解决思路是: 记录页面切换时的路由(onPageCh ...
- Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
- ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...
- ant design pro v5 总结
Ant Design Pro v5 使用心得 相比V4,V5到底强在哪? 如何更改 title图标和加载时的页面? defaultSettings中菜单的几种模式及主题等配置 国际化 request ...
最新文章
- 漫话:如何给女朋友解释为什么 Java 中1000==1000为 false,而100==100为 true?
- Zabbix监控网络设备日志文件及字段报警
- 性能翻倍 IBM借DS3500拓中低端存储市场
- MongoDB入门简单介绍
- html多语言国际化,gMIS吉密斯i18n多语言国际化更新
- 如何覆盖 SAP Spartacus 默认的 css style
- 调试opencv程序显示应用程序无法正常启动,0xc000007b
- IOS内购流程从0-1手把手教会
- Gentoo解决Windows系统txt文本中文乱码问题
- html_jQuery_ajax
- mysql 多重循环_SQL循环语句 详解
- Web服务器(Apache)与Servlet容器(Tomcat)
- 必须知道的python专属骚技巧25例
- WebRTC实时通信系列教程7 使用Socket.IO搭建信令服务器交换信息
- HTTP请求携带用户密码验证
- Excel工具类(详细版)
- Linux运维精华面试题
- 2019链塔大会暨亚洲区块链技术与应用论坛盛大召开
- iPad Pro 突然开不了机
- 续写故事demo php,一个续写故事的游戏(一)
热门文章
- 易语言上传文件 自动化编辑对话框并点击按钮
- 以太网 TCP协议交互过程中出现丢包时的解决机制,超时重传、快速重传、SACK与DSACK
- 23、LZ77压缩和解压
- LeetCode 28 Implement strStr()(实现strStr()函数)
- 【C++】全局变量定义在哪里合适
- Chrome怎么导出扩展程序(插件)为crx文件
- fetch请求cookie设置
- 大学计算机实验图灵机模型与计算机硬件,北理大学计算机实验基础 实验一_图灵机模型与计算机硬件系统虚拟拆装-实验报告.doc...
- 大规模优化方法(一)
- 程易科技祝大家新年快乐