UMI入门(创建react项目)

news2024/11/26 3:49:46

1、umI的环境要求

  1. 确保 node 版本是 10.13 或以上

  1. React 16.8.0 及以上的 React

2、什么时候不用 umi

需要支持 IE 8 或更低版本的浏览器

需要支持 React 16.8.0 以下的 React

需要跑在 Node 10 以下的环境中

有很强的 webpack 自定义需求和主观意愿

需要选择不同的路由方案

3、与其他框架对比

create-react-app

create-react-app 是基于 webpack 的打包层方案,包含 build、dev、lint 等,他在打包层把体验做到了极致,但是不包含路由,不是框架,

也不支持配置。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。

next.js

next.js 是个很好的选择,Umi 很多功能是参考 next.js 做的。要说有哪些地方不如 Umi,我觉得可能是不够贴近业务,不够接地气。

比如 antd、dva 的深度整合,比如国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等一线开发者才会遇到的问题。

4、项目创建命令如下

1、创建一个项目目录

$ mkdir myapp && cd myapp

2、创建项目

$ yarn create @umijs/umi-app

3、安装依赖

$ yarn

5、启动项目

$ yarn start

也可参考线上文档

https://v3.umijs.org/zh-CN/docs/getting-started

6、部署发布

构建

$ yarn build

本地验证

1、发布之前,可以通过 serve 做本地验证

$ yarn global add serve

$ serve ./dist

此时执行serve ./dis会报serve : 无法将“serve”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

这是因为系统还不能识别server,找到本地安装的serve的serve.cmd目录,将该目录配置到环境变量path中,

2、重启本地的vscode开发工具,执行

$ serve ./dist

效果如图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/333207.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

领域搜索算法之经典The Lin-Kernighan algorithm

领域搜索算法之经典The Lin-Kernighan algorithmThe Lin-Kernighan algorithm关于算法性能提升的约束参考文献领域搜索算法是TSP问题中的三大经典搜索算法之一,另外两种分别是回路构造算法和组合算法。 而这篇文章要介绍的The Lin-Kernighan algorithm属于领域搜索算…

精华文稿|迈向统一的点云三维物体检测框架

分享嘉宾 | 杨泽同 文稿整理 | William 嘉宾介绍 Introduction 3D检测是在三维世界中去定位和分类不同的物体,与传统2D检测的区别在于它有一个深度信息。目前,大部分的工作是倾向于用点云去做三维检测,点云实际上是通过传感器去扫描出来的一…

Redis 的安装 + SpringBoot 集成 Redis

1.安装 Redis此处的 Redis 安装是针对 Linux 版本的安装, 因为 Redis 官方没有提供 Windows 版本, 只提供了 Linux 版本. 但是我们可以通过Windows 去远程连接 Redis.1.1 使用 yum 安装 Redis使用如下命令, 将 Redis 安装到 Linux 服务器:yum -y install redis1.2 启动 Redis使…

科技云报道:开源真的香,风险知多少?

科技云报道原创。 过去几年,开源界一片火热,开源软件技术已全面进军操作系统、云原生、人工智能、大数据、半导体、物联网等行业领域。 数据显示,我国超九成企业在使用或正计划使用开源技术。 与此同时,全球各大开源组织相继兴…

苹果手机专用蓝牙耳机有哪些?与iphone兼容性好的蓝牙耳机

蓝牙耳机摆脱了线缆的束缚,在地以各种方式轻松通话。自从蓝牙耳机问世以来,一直是行动商务族提升效率的好工具,苹果产品一直都是受欢迎的数码产品,下面推荐几款与iphone兼容性好的蓝牙耳机。 第一款:南卡小音舱蓝牙耳…

Springboot部署阿里云短信服务

一、阿里云短信模板配置(获取SignName[签名名称]、TemplateCode[模板CODE]) 1. 进入阿里云首页直接搜索短信服务,并点击国内消息进入国内文本短信管理页面 2. 选择签名管理点击添加签名 填写签名信息并提交 注:下面的签名来源如…

全栈自动化测试技术笔记(一):前期调研怎么做

昨天下午在家整理书架,把很多看完的书清理打包好,预约了公益捐赠机构上门回收。 整理的过程中无意翻出了几年前的工作记事本,里面记录了很多我刚开始做自动化和性能测试时的笔记。 虽然站在现在的角度来看,那个时候无论是技术细…

【Java 面试合集】描述下Objec类中常用的方法(未完待续中...)

描述下Objec类中常用的方法 1. 概述 首先我们要知道Object 类是所有的对象的基类,也就是所有的方法都是可以被重写的。 那么到底哪些方法是我们常用的方法呢??? cloneequalsfinalizegetClasshashCodenotifynotifyAlltoStringw…

你知道 GO 中什么情况会变量逃逸吗?

你知道 GO 中什么情况会变量逃逸吗?首先我们先来看看什么是变量逃逸 Go 语言将这个以前我们写 C/C 时候需要做的内存规划和分配,全部整合到了 GO 的编译器中,GO 中将这个称为 变量逃逸 GO 通过编译器分析代码的特征和代码的生命周期&#x…

在RT-Thread STM32F407平台下配置SPI flash为U盘

记录下SPI Flash U盘实现过程中踩过的坑,与您分享。前提条件是,需要先将SPI Flash 配置到elm fal文件系统,并挂载成功。如下图然后开始配置USB1,在CubeMX,选择SUB_OTG_FS2 选择USB Device3,确认USB时钟为48…

流程控制之循环

文章目录五、流程控制之循环5.1 步进循环语句for5.1.1 带列表的for循环语句5.1.2 不带列表的for循环语句5.1.3 类C风格的for循环语句5.2 while循环语句5.2.1 while循环读取文件5.2.2 while循环语句示例5.3 until循环语句5.4 select循环语句5.5 嵌套循环5.4 利用break和continue…

【八大数据排序法】堆积树排序法的图形理解和案例实现 | C++

第二十一章 堆积树排序法 目录 第二十一章 堆积树排序法 ●前言 ●认识排序 1.简要介绍 2.图形理解 3.算法分析 ●二、案例实现 1.案例一 ● 总结 前言 排序算法是我们在程序设计中经常见到和使用的一种算法,它主要是将一堆不规则的数据按照递增…

BinaryAI全新代码匹配模型BAI-2.0上线,“大模型”时代的安全实践

导语BinaryAI(https://www.binaryai.net)科恩实验室在2021年8月首次发布二进制安全智能分析平台—BinaryAI,BinaryAI可精准高效识别二进制文件的第三方组件及其版本号,旨在推动SCA(Software Composition Analysis&…

网络通信协议是什么?

网络通信基本模式 常见的通信模式有如下2种形式:Client-Server(CS) 、 Browser/Server(BS) 实现网络编程关键的三要素 IP地址:设备在网络中的地址,是唯一的标识。 端口:应用程序在设备中唯一的标识。 协议: 数据在网络中传输的…

7、单行函数

文章目录1 函数的理解1.1 什么是函数1.2 不同DBMS函数的差异1.3 MySQL的内置函数及分类2 数值函数2.1 基本函数2.2 角度与弧度互换函数2.3 三角函数2.4 指数与对数2.5 进制间的转换3 字符串函数4 日期和时间函数4.1 获取日期、时间4.2 日期与时间戳的转换4.3 获取月份、星期、星…

码上掘金实现电子木鱼

前言 前几天在朋友圈看到“敲电子木鱼”的视频,敲一下木鱼就提示“功德 1”,还带有敲击声和念经的声音,感觉挺有意思的。 心血来潮,捣鼓了一晚上,借助码上掘金实现了这个功能。 展示效果 素材 准备素材如下&#…

又一国产开源项目走向世界,百度RPC框架Apache bRPC正式成为ASF顶级项目

2023 年 1 月 26 日,Apache 软件基金会 (ASF) 官方正式宣布Apache bRPC 正式毕业,成为 Apache的顶级项目。 我听到这个消息是挺开心的,毕竟是又一款由国人主导的apche顶级项目,再次证明国内在开源界正在发挥越来越重要的作用。 …

Java的对象和类

名词解释 对象是指由类定义的数据结构,拥有属性和方法。它是运行时实例化的。 类是一种用于描述对象的模板,它定义了对象的属性和方法。类是一种类型,可以用于定义对象,并且可以对对象进行操作。 故事概要 小明是初学者想要学习…

JVM——7JVM调优实战及常量池详解

Arthas工具的使用 阿里巴巴开源的java诊断工具 下载插件 上传至linux环境 在linux跑起来的java项目,可以用Arthas进行查看 项目上线前的时候没问题,上线了就出问题 ,用来查看线上代码 jad 项目名 :反编译线上正在运行的代码 用…

SpringCloud-Netflix学习笔记10——Hystrix实现服务熔断

一、概述 1、分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免的失败! 2、服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务C,微服务B 和微服务C又…