当前位置：首页 > news >正文

Ant Design Pro V4下载运行

news 2025/6/6 10:11:46

简介：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>