本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

一、简介：

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。（通过umi我们可以简化react项目开发中的路由）

umi蚂蚁金服推出的

二、umi与creact-react-app的区别

cra 他是一个基于webpack的打包方案在默认的项目中是不包含路由

umi是一个框架他其中已经内容了路由等功能让我们在开发项目的时候更加高效的完成指定的功能

三、yarn

yarn就是和npm一样都是一个包管理工具

yarn是由 facebook推出的一个包管理工具

yarn的安装

npm install -g yarn

yarn和npm 的对照表

功能	npm	yarn
初始化	npm init	yarn init
安装依赖	npm install	yarn install或者 yarn
新增依赖	npm install --save xxx	yarn add xxx
全局安装	npm install -g xxx	yarn global add xxx
同时下载多个	npm install --save xx1 xx2	yarn add xx1 xx2
删除依赖	npm uninstall --save xxx	yarn remove xxx

如果觉得yarn默认下载很慢那么我们可以把yarn切换成淘宝镜像地址

yarn config set registry https://registry.npm.taobao.org/

四、umi的创建

npm install -g umi / yarn global add umi 全局安装

umi -v 查看版本

创建一个文件夹并且cd到这个文件夹之下（因为umi在创建项目的时候不会自动生成项目文件夹所以我们要自己创建）

npm 或 yarn create @umijs/umi-app 项目的创建

npm install 或者 yarn 来进行项目的依赖下载

npm start 或者 yarn start 来进行项目的启动

五、页面创建

手工创建

我们可以创建类组件也可以创建函数组件

import React, { Component } from 'react'

export default class home extends Component {
    render() {
        return (
            <div>
                我是一个类组件
            </div>
        )
    }
}


function Shop(){
    return (
        <div>
            我是一个函数组件
        </div>
    )
}
export default Shop

自动创建

我们可以在项目的根路径下输入如下命令即可自动创建对应的页面

umi g page xxx(页面名)

umi g page xxx(页面名) --typescript --less 创建ts与less的

六、6. 路由的配置

去项目下的 .umirc 文件进行配置

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    // 配置路由
    { path: '/home', component: '@/pages/home' },
    { path: '/shop', component: '@/pages/shop' },
  ],
  fastRefresh: {},
});

七、路由导航

编程式

history.push

声明式--Link

// 1.引用
import {Link,history} from "umi"
let Fun=()=>{
    let demo=()=>{
        // 编程式导航
        history.push("/shop")
    }
    return (
        <div>
            <h1>我是路由导航</h1>
            {/* 2.使用 */}
            <Link to="/">默认页面</Link>
            <Link to="/home">home页面</Link>
            <Link to="/phone">phone页面</Link>
            <Link to="/shop">shop页面</Link>
            <h1>编程式导航</h1>
            <button onClick={demo}>点我去shop</button>
        </div>
    )
}
export default Fun

八、重定向与404页面

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    // 重定向
    {exact:true, path:"/",redirect:"/index"},
    { path: '/index', component: '@/pages/index' },
    // 配置路由
    { path: '/home', component: '@/pages/home' },
    { path: '/shop', component: '@/pages/shop' },
    { path: '/phone', component: '@/pages/phone' },
    // 404页面
    { component: '@/pages/no' },
  ],
  fastRefresh: {},
});

九、二级多级路由

1.创建页面

2.在指定的一级路由规则中使用routes 进行二级路由的配置

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    // 重定向
    {exact:true, path:"/",redirect:"/index"},
    { path: '/index', component: '@/pages/index' },
    // 配置路由
    { path: '/home', component: '@/pages/home' },
    { path: '/shop', component: '@/pages/shop' },
    { 
      path: '/phone', 
      component: '@/pages/phone', 
      // 配置二级路由
      routes:[
        { path: '/phone/era', component: '@/pages/er/era' },
        { path: '/phone/erc', component: '@/pages/er/erc' },
      ]
    },
    // 404页面
    { component: '@/pages/no' },
  ],
  fastRefresh: {},
});

3.设置二级路由的出口

this.props.children 来配置二级路由的出口

十、约定式路由

umi中除了配置式路由以外同样也支持约定式路由约定是路由就是不需要我们手工的区在配置文件上指明路由的相关参数

如果没有routes这个配置项那么umi会自动进入到约定式路由模式他会自己分析src/pages文件夹从而自行生成路由规则

十一、函数组件与类组件的优缺点

函数组件不会被实例化整体的渲染速度要比类组件高

函数组件整个内容被进行剪成了一个jsx 所以语法上更加的简单

函数组件不需要访问this

函数组件不能使用state 生命周期 ref等内容需要用hook替代语法上我们要学习新内容

Umi笔记---kalrry

前言