react.js 前端框架 使用umi搭建react项目

前言：根据create umi脚手架创建项目，选择Ant Design Pro的，umi默认为最高版本，里面的示例也是依照最高版本的方式所写的代码。如果个人需要低版本的umi，推荐大家使用Simple App模版去创建，然后手动将umi版本降低，去适配自己所需版本及内容。

首先我们需要先创建一个文件夹，并在小黑窗里跳转到我们新建的文件夹内，执行npm install umi命令进行安装，也可全局安装 npm install -g umi

安装完成后，运行命令npm create umi，会提示安装create-umi，根据命令提示进行下一步就可

Need to install the following packages:

create-umi@4.0.6

Ok to proceed? (y)

选择y，之后会提示选择模版，创建对应文件

? Pick Umi App Template › - Use arrow-keys. Return to submit.

 Simple App

 Ant Design Pro

 Vue Simple App

根据需要选择自己所需，本文中使用的是 Ant Design Pro

✔ Pick Umi App Template › Ant Design Pro

? Pick Npm Client › - Use arrow-keys. Return to submit.

❯   npm

    cnpm

    tnpm

    yarn

    pnpm

依旧是根据需要选择自己所需，本文中使用的是 npm

✔ Pick Umi App Template › Ant Design Pro

✔ Pick Npm Client › npm

? Pick Npm Registry › - Use arrow-keys. Return to submit.

❯   npm

    taobao

同样选择，本文中使用的是 npm，选择完之后，创建项目

✔ Pick Umi App Template › Ant Design Pro

✔ Pick Npm Client › npm

✔ Pick Npm Registry › npm

...............具体如下图所示

 创建成功后，你会看到项目已经包含了所需的文件内容，配置文件、项目文件、依赖等，不过建议在手动安装一下依赖，就运行一下npm i，以防万一 具体的文件列表如下

 依照Ant Design Pro模版创建的项目，会有示例文件，npm start运行起来就可以看到了

以上是我使用umi创建项目的实践，对于模版选择中的另外两个我还没有实践过，不太清楚。

 第一个Simple App选项，创建过程跟上述一致，所创建出来的项目运行起来之后，页面展示如下：

精彩文章