AntDesign Pro安装过程

详细资料请到官网查看文档

Ant Design Pro相关系列文章:

一、AntDesign Pro安装过程

二、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-前端部分

三、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-SpringBoot后端部分

四、搭建Vue版Ant Design Pro后台管理系统

五、基于Ant DesignPro Vue实现通过SpringBoot后台加载自定义菜单- 前后端分离

六、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题


1、初始化ant-design,并构建一个mc

# 使用 npm,如果npm不是最新版需要运行npm install -g npm@最新版本号
npm i @ant-design/pro-cli -g
# 构建一个Demo应用mc,mc是自定义的,可以根据需要修改
pro create mc

AntDesign Pro安装过程_第1张图片AntDesign Pro安装过程_第2张图片

2、选择  umi 的版本

根据官方文档,目前如果选择了 umi@4 版本,暂时还不支持全量区块。我们选择umi@3的complete版本

Windows的用户建议采用cmd命令模式,采用PowerShell会出现如上图和下图显示错乱的问题

AntDesign Pro安装过程_第3张图片

 3、安装依赖

#进入mc目录
cd mc
#根据官方文档采用tyarn安装更快
tyarn

在这个过程中会遇到一些错误,根据错误提示去一条一条解决后就可以了; 

1、nodejs版本不兼容

     错误信息如下:

[email protected]: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "15.2.0"
error Found incompatible module.

    解决方案:下载或升级成最新的nodejs,NODEJS官网

AntDesign Pro安装过程_第4张图片 如下图所示安装依赖完成

 4、启动

npm run start

AntDesign Pro安装过程_第5张图片 出现上图所示即启动成功,可以通过在浏览器中访问http://127.0.0.1:8000访问

AntDesign Pro安装过程_第6张图片

AntDesign Pro安装过程_第7张图片

你可能感兴趣的:(前端,Java,npm,javascript,前端)