UmiJS搭建企业级React项目实战操作(码字ing)

2,293 阅读2分钟

前言

UmiJs就相当Vue中的Vue-Cli脚手架一样。用来搭建企业级的React项目。

下面就跟我来一起学习,怎么用UmiJS搭建一个企业级的React项目。学会了好找工作,好加薪。

一、准备工作

1、检验node版本

建议node版本为8.10或更高。在控制台输入node -v 检验

2、安装yarn

建议使用yarn来管理npm依赖包。在控制台输入npm install -g yarn安装。

安装完成后,输入yarn -v,检验是否安装成功

3、安装UmiJS

全局安装UmiJS,并确保它是2.0.0或更高版本。在控制台输入yarn global add umi

因为安装地很慢,我们可以安装tyarn,使用国内资源来安装UmiJS。 在控制台输入npm i yarn tyarn -g,安装tyarn。
在控制台输入输入tyarn -v检验是否安装成功
然后在控制台输入tyarn global add umi
安装完成后,输入umi -v,检验是否安装成功
如果提示“umi”找不到命令,你需要将tyarn global bin路径配置到环境变量中。先在控制台输入tyarn global bin

配置完成后,再控制台输入输入umi -v,检验是否安装成功

二、创建 umi 项目

1、创建目录,打开目录

在控制层输入mkdir 05umi , cd 05umi

2、tyarn create umi

在控制台输入tyarn create umi

3、选择 project

通过上下键来选择,选择 app - Create project with a simple boilerplate, support typescript. 回车继续。

4、是否使用typescript

输入N,回车继续。

5、选要安装的功能

通过上下键来选择,空格确认,选择anta、dva后,回车继续。

6、创建好目录和文件

7、安装依赖

在控制台输入tyarn

8、运行

在控制台输入yarn start

运行完成后
在浏览器中打开http://localhost:8000/,会出现如下画面,代表已经创建成功