使用npm 搭建Ant Design Pro 项目

一、初始化 Ant Design Pro 脚手架

1.新建一个项目文件夹，在该位置cmd，进入命令板

2.跟着官网敲 开始使用 - Ant Design Pro

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

npx pro create myapp

3.选择版本   umi@3  --->  simple

4.查看文件夹内容

5.安装依赖

$ cd myapp && tyarn
// 或
$ cd myapp && npm install(我用的这个)

 

a.报错：fatal: not a git repository (or any of the parent directories): .git

b.解决方式：找到文件位置，执行git init

 之后重新执行 npm install,最后几行结果如下：

大致意思：

1. Browserslist警告：caniuse-lite已过期，建议运行npx update-browserslist-db@latest来更新。
2. 安全性漏洞警告：npm audit检测到65个漏洞，其中有17个中等级漏洞，39个高危漏洞和9个严重漏洞。                                                                                                           建议运行npm audit fix命令来修复那些不需要注意的问题，或运行npm audit fix --force来解决所有可能的问题，包括可能引入破坏性更改的问题。请注意，修复漏洞可能会导致依赖项版本变更，所以在使用--force标志之前，请确保你已经备份了项目或了解可能产生的影响。

3. 存在一些问题需要手动审查并可能需要更改依赖项。

   建议运行npm audit命令以获取更详细的漏洞信息，并根据提示进行手动审查，可能需要更新或更改一些依赖项以修复漏洞。

c.所以执行： npx update-browserslist-db@latest 和 npm audit fix（建议复制自己命令面板上的）

二、使用WebStorm打开

1.在终端执行yarn

2.安装Umi UI工具，执行yarn add @umijs/preset-ui -D

3.运行start

 

3.1.报错

ERROR in ./src/components/index.md
Module build failed (from ./node_modules/@umijs/preset-dumi/lib/loader/index.js):
Error: [BABEL] E:\develop_tools\java\用户中心\myapp\src\components\index.tsx: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
- Did you mean 'opera'? (While processing: "E:\\develop_tools\\java\\用户中心\\myapp\\node_modules\\@umijs\\babel-preset-umi\\app.js$0$0$39")

3.2.解决办法

 

4.再次运行start

 

 

三、 使用Umi UI工具，自动添加代码

1.点击右下角米饭的图标

2.添加分析页

 

3.报错： Error: write data discarded, use flow control to avoid losing data

 

3.1.返回 WebStorm ，发现目录存在

3.2.在项目文件位置cmd,执行 rm -rf ./src/.umi详情：ant-design-pro项目启动一直转圈 - 潇湘羽西 - 博客园 (cnblogs.com)

4.再次执行start，登录后，分析页面存在

5.再次添加个人中心模板

5.1如果这里没有成功，重启项目重新登录，重新加模块再试一次

5.2自动生成代码

5.3登录，已存在个人中心界面