零、Ant Design Pro 开始

使用脚手架构建Ant Design Pro

1、使用npm 安装脚手架
在电脑上面创建一个目录:myproject，用Visual Code 打开创建的目录，按Ctrl+`进入Nodejs终端，使用npm安装Ant Design Pro脚手架，在VSCode的终端界面输入并执行以下命令：

npm i @ant-design/pro-cli -g

2、使用脚手架创建
等脚手架安装完成之后，就可以开始用脚手架创建一个Ant Design Pro系统，执行：

pro create myapp

在出来的界面里面，选择选择 umi 的版本，因为官方说道umi4版本暂时还不支持全量区块，所以选择umi3版本

umi@4
❯  umi@3

接下来选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，功能更加丰富，因为第一次学习，想多见识更多功能，选择complete版本

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
 simple
 ❯ complete

3、安装依赖库
使用脚手架创建成功之后，在电脑上的myproject里面，多出了一个myapp子目录，进入里面后可以看到一套我们需要的前端管理后台的react源代码已经创建好了，主要目录和功能如下：

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

我们可以从VsCode终端进入子目录，执行命令

cd myapp

进入myapp目录之后，就可以开始安装本套源代码所有的所有依赖库，执行：

npm install

部分机器如果npm版本太高，会出现unable to resolve dependency tree While resolving: ant-design-pro@5.2.0 Found: react@17.0.2等提示，这个时候可以采用npm install --legacy-peer-deps 跳过对等依赖项试试

关于peerDependencies的问题解释：npm 从版本v7开始，install就默认以peerDependencies的方式去下载了。如果库里面有app_A和app_B共同依赖了packageA，当使用peerDependencies（对等依赖关系）方式去下载的时候会被整合成一个packageA并且只有一个版本。这个时候会爆出如上所述的错误，npm i --legacy-peer-deps 的方式安装的时候，app_A和app_B分别安装其对应依赖的packageA，从而解决包冲突问题。

4、运行Ant Design Pro
静等安装成功之后，执行开始运行的命令：

npm run start

如果都顺利的话，VsCode终端呈现如下：（如果有一些警告信息，也可以忽略，警告信息不影响使用）

在VsCode里面，Ctrl+单击 http://localhost:8000 （或是在浏览器地址栏中直接粘贴），打开的浏览器里面出现如下画面：

至此我们的第一步已经成功迈出了。输入用户名:admin，密码：ant.design就可以进入管理系统，成功界面如下：

安装问题解决办法汇总

执行pro create 的时候，显示禁止运行脚本的解决办法

执行脚本的时候显示：