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