使用Ant design pro初始化的各种坑和安装细节

为解决使用“小米饭（umi ui）”中台前端项目的初始化

进入cmd，先指定版本：

npm install -g @ant-design/pro-cli@3.1.0

如果有其他版本，那就先卸载，如果没有直接跳过这一步：

npm uninstall -g @ant-design/pro-cli 然后再：npm install -g @ant-design/pro-cli@3.1.0。

然后创建项目：

pro create myapp
​
选择umi@3、simple（这个根据自己选择）

然后等待项目创建完成

完成之后用IDE进入终端输入命令：

npm install / yarn install
（如果没有yarn，使用这个命令进行下载：npm install -g yarn）

此时你可以看一下umi的版本是不是3点几，如果是但却报错了，就用

yarn add umi指定版本

运行一下就行umi

然后开启Umi UI:

yarn add @umijs/preset-ui -D 或者 npm install --save-dev @umijs/preset-ui

然后在package.json中找到start，直接启动，就可以得到一个拥有”小米饭“的ui界面。

可能会遇到的问题：

第一个问题：

创建项目不成功问题

一个是说你的文件格式语法目录的问题，

网上说有两种不同的解决方式：

• 一种是你的目录和安装的模块不在相同磁盘导致的，这个我没遇到，就不细说了。

• 我遇到的是第二种，就是在你的../nodejs/node_global/bin文件夹下的create-umi.cmd文件和umi.cmd文件中，可以看到：

• 其实这是错误的，应把前面的‘%~dp0'符号删掉，就解决了这个问题，但是要注意的是，删掉之后你就不要再用 “yarn create umi 项目名”了， 不然你就又掉入这个坑了，删掉之后你在创建项目时，

  直接create-umi 项目名 就行了。

第二个问题：

创建项目后运行项目出错问题

第二个问题是你在使用npm run start指令 的时候，报错了，我那个错误忘截图了，反正也不难，报错之后有好几行err：错误，

我是英语不太行，没看懂他那个意思，其实那个问题就是说你这个项目里没有可运行的文件，其实归根结底就是你没有进入你创建的项目里面去。

比如说：你在code文件夹里创建了个myapp项目，创建完之后其实你的位置还是位于code文件夹下的，你并没有进入myapp文件夹里，所以呢，你在code文件夹下使用npm run start指令肯定报错啊，解决的方法就是 ：

cd 你的项目名  
然后再使用npm run start指令就O了

第三个问题：

版本兼容问题

首先你想用umi ui的话，你肯定得看一下他的版本兼容性，现在Ant design pro的已经迭代到第五代了，而umi ui是在第三代的，你如果要用， nodejs 版本号要在16.几左右，我的是node.js16.16.0，然后是umi版本号要用3.几的版本，我的是umi@3.2.2。

需要注意的是，你如果nodejs版本号已经对不上了，需要重新下载了，你需要把它删的非常干净，不然后期你重新下载一个nodejs版本之后会出现难以预料的问题。 这里建议你删除完之后可以下载nvm（它是一个nodejs的一个多版本管理器），通过nvm下载你需要的nodejs版本同时你需要配置一下他的镜像。

第四个问题

查询umi -v 问题

查询umi版本号时版本号出来之后 后面报错，

解决方式：在终端 用

yarn add umi@版本号。

第五个问题

证书问题

umi ui创建模版时出现断开 控制台报错：证书已过期。

其实就是镜像问题，你把所有的镜像都改成了“https://registry.npmmirror.com/”，可是当你用umi ui的辅助小工具创建模版或组件时 前端就显示连接断开，后端会出现镜像错误，就是说你配置了一个过期的淘宝镜像，但是说真的你确实都没配过这个淘宝镜像，但却出现了这个问题。

解决方式：

记住这个包getnpmregistry，看下你们的node_modules下面的这个包，里面有个registryMap字段，里面配置了taobao源

const registryMap = {
  taobao: "https://registry.npmmirror.com/",
  npm: "https://registry.npmjs.org"
};