搭建react+ant design pro+umi 项目框架

一、 写本文的原因

我搭建react+antd+umi这个框架的原始资料主要是来源于（React+Umi4从零快速搭建中后台系统保姆级记录教程（一、项目创建及初始化））

而我写这篇文章的本意就是用来记录我用搭建时候的步骤汇总。

二、 npm和node版本

        我本地的npm 版本是：9.6.7

        

        我本地的node版本是：16.15.1

        

        并且我本地安装了yarn，而项目搭建的时候有使用到了yarn（这个看个人情况是否安装）。

        
        yarn 安装方式（安装的是全局的）： npm install -g yarn

三、 开始搭建

        这里一共有3种搭建方式，方法一和方法二搭建出来的效果图是一样的，仅限于一个框架。而方法三搭建出来跟官网例子一样，有登录界面，并自带很多导航菜单例子，相对而言更完善。所以，可以根据需要来选择搭建方式。

1. 方法一：

        原始资料的搭建方式是使用 ： npx create-umi@latest

安装成功后，使用npm start dev 将项目运行起来：

2. 方法二：

        如果上面那种方式安装不了，报错到自己不知道怎么解决，那就使用这种方法试试（我最开始就是用上面方法没安装好，才试了如下方法）。运行命令：npm create umi

 安装成功后，使用yarn start dev 将项目运行起来 ：

3. 备注：

        以上两种方式安装都可以，第二种方式在后面选择的时候我选择了yarn安装。安装方式影响不大，看个人喜欢。但是值得注意的是，假如你用了yarn安装失败，想要再重新安装一次，那么重新安装的时候也只能使用yarn，因为npm和yarn在同一个项目中不能混用。除非你把原始文件夹删的干干净净后再重新安装。两种方式的运行效果都是一样的。

4. 路由配置

（1）方法一和方法二的说明

      从项目文件中内容可以看出，项目原始路由配置是在根目录的.umirc.ts 文件中，但是对我们来说，这样好似不太合理，所以，我们就将路由配置文件重新换个地方。

（2）配置方式更改

        （1） 在项目根目录下创建一个config文件夹，并在里面创建config.ts文件。

        （2）再把.umirc.ts 文件中的内容全部复制到config.ts文件中，并保存。

        （3） 删除原来的路由配置文件：.umirc.ts 文件（因为.umirc.ts优先级较高，如果这个文件不删，那么默认就会读取这个文件内的内容）。

        （4） 如果这是一个大项目，并且有很多页面，那么，这里可以将路由配置单独提出来写到一个文件中。例如，我在config文件夹下新增一个routes.ts文件，将路由配置部分挪过去，并在config.ts中引用routes.ts中的路由配置。

3. 方法三：

（1） 效果图

        我们先看最终效果图，可以看到与方法一和方法二的区别在于左侧菜单、页面颜色配置等。 

（2）搭建方式

         1）先运行命令，进行全局安装 ：npm i @ant-design/pro-cli -g

               备注： 这里使用全局安装是为了以后创建此类项目可以用  pro create  XXX 快速创建，而不用再次安装ant-design/pro-cli -g ，所以接下来就使用此命令创建项目。

        2）在运行命令进行项目创建： pro create myProject

                ① 运行命令后要选择安装umi版本。这里我安装的是umi3。

                

                ② 然后选择安装的脚手架，我这里选择的是complete 完整的。

                

        ③ 然后就等它自动安装完成。

        ​​​               ​​​​​​ 

        ④  然后进入刚刚创建的项目文件夹，进行初始化操作（最好用管理员权限去操作，否则可能初始化不成功）。初始化操作可以使用npm和yarn两种。我使用的是yarn。

        

        ⑤ 依赖包安装后，就可以运行起来了（我用的是yarn），页面就是效果图上的样子。