使用umi搭建react项目

(ㅍ_ㅍ)608

已于 2022-07-11 18:02:16 修改

阅读量5.6k

点赞数 4

文章标签： react.js 前端框架

于 2022-07-11 15:43:04 首次发布

本文链接：https://blog.csdn.net/weixin_60651132/article/details/125722259

版权

前言：根据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选项，创建过程跟上述一致，所创建出来的项目运行起来之后，页面展示如下：

关注