从零开始搭建Umi项目

已于 2022-05-18 19:01:01 修改
阅读量1.7k 收藏
点赞数
分类专栏： 前端 文章标签： 前端 react
于 2022-04-25 16:40:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wendy_monkey/article/details/124407781
版权
本文从环境准备开始，介绍如何使用npx搭建Umi项目，解决yarn搭建时的错误问题。接着，详细阐述了安装antd-mobile的步骤，以及在过程中遇到的umi项目与antd-mobile v5兼容性问题的解决方法，即更新相关插件到最新版本。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

从零开始搭建Umi项目

文章目录

环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。
推荐使用 yarn 管理 npm 依赖

一、脚手架

新建项目目录

$ mkdir myumi && cd myumi

创建项目

$ yarn create @umijs/umi-app
#或 npx @umijs/umi-app

在这里插入图片描述
我的电脑使用yarn搭建umi报错，不是内部或外部命令，也不是可运行的程序或批处理文件。
改为使用npx，脚手架搭建成功
在这里插入图片描述
安装依赖

$ yarn

在这里插入图片描述
启动项目

$ yarn start

二、安装antd-mobile

$ npm i
最低0.47元/天 解锁文章
umi脚手架搭建的项目_项目实战UmiJS开发（附带qiankun）
weixin_39564807的博客
12-03 900
前言Coder 是怎么样提高自己的实力？一件事情做坚持一万遍，唯手熟尔。不知道各位有没有体会，总感觉之前的代码写的很 low 逼，想抽点空来折腾折腾自己还是很有乐趣的。重构还是很有乐趣的。手工狗头镇楼！搭建基础框架一般来说，中小型团队的中台项目都是前端自己主导样式，而样式、布局、路由、权限等等一系列的通用性很强的基础框架，自研比较花时间，投入的回报率不高，最好的方法就是在比较成熟的方案上...
从零开始搭建antd design pro项目
youlinhuanyan的博客
12-05 2933
本文介绍 如何重零开始搭建 基于react的antd admin pro项目。从多零开始呢？重刚装好操作系统开始。 react是三大前端框架，antd admin是蚂蚁金服开发在中端应用框架，这篇文章将使用umi.js来搭建上述系统。 重要用官方URL umi.js 官方手册 antd admin pro 官方手册 antd admin pro 预览路径 antd admin pro 官方g...
Umi创建项目
weixin_43279985的博客
05-08 3611
文章目录前言一、环境准备1、Node环境2、安装Nvm2.1、下载安装包2.2、本地安装2.3、打开管理员权限2.4、查看nvm版本2.5、Node安装2.6、 查看Node版本2.7 、切换Node版本2.8、 总结二、yarn2.1、安装yarn三、脚手架3.1、新建空目录3.2、官方工具创建项目3.3、安装依赖3.4、启动项目3.5、修改配置 前言 Umi，中文可发音为乌米，是可扩展的企业级前端应用框架,下面的图片就是今天的主角了。 一、环境准备 1、Node环境 作为前端开发Node必不可少，
Umi.js 安装与配置指南
最新发布
gitblog_00563的博客
03-27 395
Umi.js 安装与配置指南 umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/um/umi ...
React UmiMax搭建项目
m0_67011584的博客
12-11 3852
来管理 node 版本(建议找一篇关于`nvm下载安装`的相关博客自行安装)umi官网会自动帮我们生成框架。// 下载指定版本node。// 检查当前node版本。1. 找个地方建个空目录。2. 通过官方工具创建项目。3. 安装 pnpm。// 全局安装pnpm。// 查看pnpm版本。// 检查nvm版本。2. 安装 node。// 切换到指定版本。// 查看当前镜像源。// 切换淘宝镜像源。
使用umi脚手架 创建项目 详细教程
知无涯
12-18 1万+
首先全局安装umi 两种方式 yarn安装和npm安装 都需要全局进行安装 确保 node 版本是 8.10 或以上 yarn global add umi 或 npm i umi -g umi -v 如果umi -v 无法显示版本号, 检查下是否是npm 或者yarn全局安装, 是否配置了环境变量 umi 通过create-umi 来提供脚手架能力创建项目有两种形式, 一...
创建Umi项目
weixin_45204443的博客
03-20 849
关于umi的创建
基于umi+antd-mobile的移动端项目模板
02-22
在开始新项目时，开发者只需在此基础上根据自己的业务需求进行扩展和定制，避免从零开始创建项目结构。 总的来说，"基于umi+antd-mobile的移动端项目模板"是一个强大且高效的移动端开发起点，它整合了umi的高级特性...
[前端]使用umi-library从零搭建属于自己的组件库
Jay_SG的博客
07-07 2883
操作环境 操作系统:mac os 10.15.5 / window基本一样 编辑器:VSCode最新 nodejs：12.18.2 LTS 项目准备 1.建个空目录？No No No，文件夹忘了也就删了，建个仓库绝对是必要的，为了仪式感！！！ 自行登录github并且 https://github.com/new 2.建完之后当然是git clone 省掉了你本地代码上传时的尴尬难受经历，我就是这么走过来的，so小白信我， 当然你也可以git init & git remote add … 这种
REACT实战项目从0到1搭建（仅供参考）
热门推荐
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
通过Umijs从0到1搭建一个React项目
阿琰a_的博客
07-10 3093
有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。
基于umiantdmobile的移动端项目模板
08-10
基于umi antd-mobile的移动端项目模板
React+umi+antd 学习笔记——项目搭建(未完成)
cxylcc的博客
03-30 253
React+umi+antd 学习笔记——项目搭建脚手架安装react+umi+typescript安装依赖添加antd运行 脚手架安装react+umi+typescript $ npx @umijs/create-umi-app 或 $ npm i yarn -g $ yarn create @umijs/umi-app 安装依赖 $ npm install 添加antd $ npm install antd --save 运行 $ npm start ...
umi的学习记录-搭建项目
qq_40409143的博客
04-18 670
什么是umi 可扩展的企业级前端应用程序框架,插件化的企业级前端应用框架。 特性 ???? 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。 ???? 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。 ???? 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信
umi项目流程
weixin_56364552的博客
07-17 3006
React项目说明 一.通过脚手架创建项目 https://umijs.org/zh-CN/docs/getting-started cnpm i yarn tyarn -g mkdir admin-app cd admin-app yarn create @umijs/umi-app npx @umijs/create-umi-app yarn yarn start 二.熟悉目录和文件 1.mock 模拟数据 http://mockjs.com/ 生成随机数
umi框架实战项目
悦分享
05-02 2929
29.9React课程 第10节：umi框架实战项目 (第10节：umi框架实战项目&) 第10节：umi框架实战项目& Generator是异步解决方案，next执行下一个步骤 *可以放在后面也可以放在前面 Yield表示暂停 import React, { Component } from "react"; function* hell...
React 之umi框架项目搭建
perfectshao的博客
12-08 2069
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、创建项目文件夹二、在需要的文件夹下的终端输入三、选择需要生成的项目类型四、选择所需功能五、安装依赖六、运行 前言 Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 手动搭建基础的Umi框架。 一、创建项目文件夹 可以直接在目录
探索 `umi-antd-mobile`：高效构建移动端应用的秘密武器
gitblog_00031的博客
03-30 694
探索 umi-antd-mobile：高效构建移动端应用的秘密武器 去发现同类优质开源项目:https://gitcode.com/ 项目简介 在开发移动端应用时，我们往往需要一个强大而灵活的框架来加速开发流程并保证代码质量。 正是这样一个项目，它基于 Umi.js 和 Ant Design Mobile，提供了完整的前端解决方案，旨在帮助开发者快速、高效地构建高质量的移动应用。 技术分析 Umi...
基于umi脚手架新建react项目
ds0604的博客
12-02 633
1.在D盘新建一个英文名文件夹 2.打开文件夹，在框内输入cmd,在弹出的命令提示符窗口依次输入以下内容 npx create-react-app my-app cd my-app npm start
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值