Ant Design Pro安装及简单搭建

怼烎@ 2024-04-03 12:59 90阅读 0赞

**目录**

一、node.js、npm及yarn安装及配置

二、Ant Design Pro安装及简单构建

--------------------

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

## 一、node.js、npm、yarn及Git安装及配置 ##

在搭建Ant Design Pro的时候需要用到node.js、npm、yarn及Git，下面是配置的相关博客

在上一篇博客有node.js、npm及yarn安装及配置：

[(4条消息) yarn安装和基本使用\_夏志121的博客-CSDN博客![icon-default.png_t_M85B][]https://blog.csdn.net/m0\_61961937/article/details/127322347?spm=1001.2014.3001.5501][4_ yarn_121_-CSDN_icon-default.png_t_M85B_https_blog.csdn.net_m0_61961937_article_details_127322347_spm_1001.2014.3001.5501]

以前的博客有Git安装的教程：

[(71条消息) Git下载安装及基本配置\_夏志121的博客-CSDN博客![icon-default.png_t_M85B][]https://blog.csdn.net/m0\_61961937/article/details/126152246][71_ Git_121_-CSDN_icon-default.png_t_M85B_https_blog.csdn.net_m0_61961937_article_details_126152246]

## 二、Ant Design Pro安装及简单构建 ##

在构建前多看一看官方文档，以防出错：

[开始使用 - Ant Design Pro![icon-default.png_t_M85B][]https://pro.ant.design/zh-CN/docs/getting-started][- Ant Design Pro_icon-default.png_t_M85B_https_pro.ant.design_zh-CN_docs_getting-started]上一篇博客已经安装好node.js、npm和yarn了

下一步在你需要生成项目的空文件进入DOS命令窗口

![0855c5cc9eb04e2a82be48477c37db1e.png][]

使用官方提供的pro-cli来快速初始化脚手架

![c5b4949505364fbc93c524763054f68a.png][]

# 使用 npm
    npm i @ant-design/pro-cli -g
    pro create myapp

总共两段代码（第二个命令之后选择umi@3，搭建一个简单的脚手架即可）：

![4325b4942ca848c297b5f01d5ba5891e.png][]

此时项目就生成在空文件夹里：

![c73360d133dd4737a623ca8a377dede5.png][]

把项目在webstorm中打开（webstorm需要本地自行安装），需要运行npm

![f04a53ec997943d4877bdc632fc663d1.png][]

在终端运行yarn，下载依赖，如果用yarn是遇到问题：yarn无法加载文件，因为在此系统上禁止运行脚本是时**Windows PowerShell**阻止了脚本运行，更改运行策略即可（用管理员运行Windows PowerShell）。

> \# 查看当前策略
> 
> **get-ExecutionPolicy**
> 
> \# 更改执行策略
> 
> **set-ExecutionPolicy RemoteSigned**

![3250b6f74e884d7dab21d5763e4dc711.jpeg][]

yarn下载依赖，需要一些时间![a06b016067d640dfb3dbd73b9faf3979.png][]

执行完之后就能运行

![4d75a0f178a941cbb6e37015f8cd0cd2.png][]

![aa811397cac3434b9d4e210f75bf97f4.png][] 输入账户及密码后登录效果：

![cb9a68253d4640328ff7e2dbb5e624ac.png][]

然后是小米饭插件的运行，在终端运行：

> **yarn add @umijs/preset-ui -D**

![a57fd225205241879612b09828d159e0.jpeg][]

小米饭插件效果：

![4b5c95168b3342148586b052c83f733e.jpeg][]

Ant Design Pro简单搭建就完成了。

[icon-default.png_t_M85B]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a5dca4a8a2e740d1beae84012e3e0cf0.png
[4_ yarn_121_-CSDN_icon-default.png_t_M85B_https_blog.csdn.net_m0_61961937_article_details_127322347_spm_1001.2014.3001.5501]: https://blog.csdn.net/m0_61961937/article/details/127322347?spm=1001.2014.3001.5501
[71_ Git_121_-CSDN_icon-default.png_t_M85B_https_blog.csdn.net_m0_61961937_article_details_126152246]: https://blog.csdn.net/m0_61961937/article/details/126152246
[- Ant Design Pro_icon-default.png_t_M85B_https_pro.ant.design_zh-CN_docs_getting-started]: https://pro.ant.design/zh-CN/docs/getting-started
[0855c5cc9eb04e2a82be48477c37db1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b37b8088403148c797d01e3182b2d8ad.png
[c5b4949505364fbc93c524763054f68a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/84b176d7f8644874a6fce70ec1ab952e.png
[4325b4942ca848c297b5f01d5ba5891e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/acfcdd43a56b477da6aea3c9c464da44.png
[c73360d133dd4737a623ca8a377dede5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/31cbd0e1364046938e9907d7734d94d6.png
[f04a53ec997943d4877bdc632fc663d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1ac7f1ca434c49c3951f99e08dd5f6af.png
[3250b6f74e884d7dab21d5763e4dc711.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e7ca6a920ee24e5d838dbbe64de3b778.jpeg
[a06b016067d640dfb3dbd73b9faf3979.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f16a17a7a4aa4341bb231c1c6240a00a.png
[4d75a0f178a941cbb6e37015f8cd0cd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2fa2cb0ec9f74647a846bca82790bc60.png
[aa811397cac3434b9d4e210f75bf97f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b79990e192054008ae5a4bc8de2a68c8.png
[cb9a68253d4640328ff7e2dbb5e624ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/60699219f73f4153a31d16fd0ebd1d49.png
[a57fd225205241879612b09828d159e0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4b3f522f67844a25a9efe8afa8c80571.jpeg
[4b5c95168b3342148586b052c83f733e.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/783bfad8dfe649479896b279bb66b666.jpeg