umijs 隐藏开发工具_使用UmiJS框架开发React应用

1)、简介

UmiJS读音：(乌米)

UmiJS是一个可插拔的企业级React应用框架。官网地址是：https://umijs.org/zh/

特点：

插件化

umi的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如:pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。

开箱即用

你只需一个umi依赖就可启动开发，无需安装react、preact、webpack、react-router、babel、jest等等。

约定式路由

类似next.js的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等。

2)、安装

2.1)、安装 nodejs

要使用UmijS首先要安装nodejs环境，在Mac下安装nodejs：

brew install nodejs

windows下安装，需要到官网下载安装程序，然后下一步下一步完成即可，也非常简单。这里不介绍了，也可自行百度，网上有很多。

2.2)、安装 yarn

可以把yarn看做了优化了的npm，其中tyarn使用的是npm.taobao.org的源，速度要快一些。平常使用的话使用tyarn即可。

npm i yarn tyarn -g --registry=https://registry.npm.taobao.org

2.3)、安装 umi

tyarn global add umi

查看是否安装成功：

umi -v

如果出现 'umi' 不是内部或外部命令，也不是可运行的程序 或批处理文件或者提示 umi: command not found

3)、使用 umi

3.1)、创建项目

mkdir ~/Documents/umi-demo

3.2)、初始化

进入到项目文件夹下

cd ~/Documents/umi-demo

再创建umi其他默认的目录，这些默认的目录名字不能写错。

mkdir -p {config,mock,src/pages,src/models,src/layouts}

config/: 该目录下的config.js默认是全局的配置

mock/: 模拟后端请求数据的js目录

src/: 代码目录

pages/: 为前端页面, 页面的后缀名可以是.js或者.jsx

models/: 为数据层, 处理数据的 js 文件

layouts/: 默认是整个项目的基础布局文件

通过初始化命令将生成package.json文件，它是NodeJS约定的用来存放项目的信息和配置等信息的文件。

tyarn init -y

为项目设置一个默认的展开页面，因为umiJS在后台启动时会默认加载src/pages/index.js文件。使用下面命令可以通过umi命令创建index.js文件。

umi g page index

可以看到在pages下创建好了index.js和index.css文件。

3.3)、开发工具打开

目录结构

3.4)、运行项目

umi dev

4)、分层开发

4.1)、过程图示