Umi.js

简介: Umi.js
1.什上Umi?
  • Umi 是蚂蚁金服底层的前端框架(经妈蚁内部 5000+ 项目验证)
  • Umi 是以路由为基础的企业级React框架(同时支持配置式路由和约定式路由)
  • Umi 是一个“可插拔”的企业级React框架(内部能完全使用插件化完成的

结论:Umi是蚂蚁金服底层的、以路由为基础底层、内部功能完全使用插件化完成的React框架

如何使用

// 1. 安装umi
npm install umi
// 创建页面
- npx umi g page index
//运行项目
- hpx umi dev

Umi 是以路由为基础的企业级React框架(同时支持配置式路由和约定式路由)

什么是约定式路由?

约定式路由也叫文件路由,就是不需要手写配置路由,通过目录和文件及其命名分析出配置在Umi下pages目录下面的react组件文件名就是路由名称,Umi会帮我们自动生成路由

官方网站:https://umijs.org/zh-CN

75.png

路由.png

Umi手动配置路由

74.png

目录结构.png

官方网站:

.umirc.ts——配置文件,包含 umi 内置功能和插件的配置。

(umi run config,所以需要重新启动才有效)

// umirc.js
export default {
  routes: [
    { exact: true, path: '/', component: 'index' },
    { exact: true, path: '/home', component: 'home' },
    { exact: true, path: '/about', component: 'about' },
  ],
}
umi全局文件

layout文件夹下对umi的组件配置公共组件,比如说一般一个王章的导航头部和尾部都是固定的,那么就是一个公共组件,可以放在layout

//layouts/index.js
import React from 'react'
import Style from './index.css'
export default (props)=>{
  return(
    <>
      <div className={Style.header}>头部</div>
      <div className={Style.main}>{props.children}</div>
      <div className={Style.footer}>底部</div>
    </>
  )
}

//layouts/index.css
.header{
  background-color: aqua;
}
.main{
  background-color: royalblue;
}
.footer{
  background-color: #ccc;
}


目录
相关文章
|
9月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
9月前
|
分布式计算 JavaScript
JS项目小Tipes总结
JS项目小Tipes总结
|
JavaScript
【JS篇】JS基础要件
【JS篇】JS基础要件
81 0
|
3月前
|
JavaScript 前端开发 定位技术
Nuxt.js 和 Next.js 差异
Nuxt.js 和 Next.js 差异
155 2
|
6月前
|
JavaScript
什么是js?
什么是js?
359 0
|
6月前
|
JavaScript
注意!Vue.js 或 Nuxt.js 中请停止使用.value
注意!Vue.js 或 Nuxt.js 中请停止使用.value
|
8月前
|
JavaScript 安全 前端开发
JS神奇的或0(|0)
可以看到明显的带或0运算与不带或0运算的结果无论是位数还是符号位都有不同。 那这中间到底发生了什么? 这里找一个数字为例:117063531626496 要想验证这个问题,思路如下: 1,对比变更前后的数字的二进制格式 2,找到是否有数字表示的安全边界 首先按照思路1,我们看一下这个数字和这个数字或0后的二进制格式分别是什么:
|
9月前
|
JavaScript
js的一些理解
js的一些理解
49 1
|
SQL JSON JavaScript
为什么从egg.js到nest.js(一)
进入部门工作后,接触到的node.js服务端框架,是egg.js,后面基于扩展增加了很多插件,比如:@Controller @Service等注解,还有针对egg-framework 定制化部门使用的底层framework。
504 0
|
JavaScript
为什么从egg.js到nest.js(二)
进入部门工作后,接触到的node.js服务端框架,是egg.js,后面基于扩展增加了很多插件,比如:@Controller @Service等注解,还有针对egg-framework 定制化部门使用的底层framework。
127 0
为什么从egg.js到nest.js(二)