使用Umi脚手架快速创建项目

最新推荐文章于 2024-05-28 16:21:41 发布
最新推荐文章于 2024-05-28 16:21:41 发布
阅读量250 收藏 5
点赞数 8
文章标签： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68218656/article/details/139238307
版权

目录

步骤

1.在代码目录下创建一个文件夹，然后用VSCode打开

2.点击工具栏中的查看打开终端，然后切换到cmd

3.输入pnpm create umi然后回车

4.选择我们要使用的模板（这里我选择Ant Design Pro和pnpm、taobao,使用的时候就不需要去安装和引入主键库)

5.安装完成后如下图所示

​编辑6.打开UMI文件夹可以发现依赖是已经安装好了，不需要我们再去安装​编辑

7.最后pnpm run dev运行就行了

步骤

1.在代码目录下创建一个文件夹，然后用VSCode打开

2.点击工具栏中的查看打开终端，然后切换到cmd

3.输入pnpm create umi然后回车

4.选择我们要使用的模板（这里我选择Ant Design Pro和pnpm、taobao,使用的时候就不需要去安装和引入主键库)

注意出现下面这种红色的不是报错是警告

5.安装完成后如下图所示


6.打开UMI文件夹可以发现依赖是已经安装好了，不需要我们再去安装
7.最后pnpm run dev运行就行了

点击第一个地址

橘晨
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umi-fresh:使用最新版本umi脚手架创建的空项目
03-27
umi-fresh是一个使用最新版本的umi脚手架创建的空项目，旨在为开发者提供一个快速启动React应用的起点。umi是阿里开源的一款强大的前端应用框架，它集成了路由、状态管理、代码分割、按需加载等功能，极大地提高了...
umi-test-js.zip
08-06
Umi使用约定优于配置的理念，允许开发者快速上手并高效地组织项目结构。在这个案例中，Umi提供了一套完整的脚手架，帮助我们快速搭建应用的基础设施。 Dva则是一个轻量级的前端状态管理框架，它是基于Redux和RxJS的...
使用umi快速搭建项目
Aguai229的博客
05-23 1589
1.首先安装umi npm install umi -g 2.创建一个文件夹，注意不能是中文，在vscode 中进入文件夹，执行命令生成package.json文件 npm init 3.修改配置项 "scripts": { "start": "umi dev", "build": "umi build" }, 4.新建一个src文件夹 5.进入src文件执行命令 umi g page index 6.创建about页面，执行命令...
使用umi脚手架 创建项目 详细教程
01-07
首先全局安装umi  两种方式 yarn安装和npm安装 都需要全局进行安装 确保 node 版本是 8.10 或以上 yarn global add umi 或 npm i umi -g umi -v 如果umi -v 无法显示版本号, 检查下是否是npm 或者yarn全局安装, 是否配置了环境变量  umi 通过create-umi 来提供脚手架能力  创建项目有两种形式, 一种是是命令行  一种是使用GUI 首先介绍命令行创建项目 执行以下命令开始创建项目 npm creat umi 可以选择以下几个项目  project，通用项目脚手架，支持选择是否启用 TypeScript，
【Umi Max】 Ant Design Pro 快速上手
最新发布
小秀的博客
05-28 1308
对于页面中某一块区域的权限管理，可以使用 useAccess。，由此获取该页面（路由）的权限。组件拥有accessible和fallback两个属性，当accessible为true时会渲染子组件，当accessible为false会渲染fallback属性对应的ReactNode。
Umi创建项目
weixin_43279985的博客
05-08 3007
文章目录前言一、环境准备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项目创建
weixin_50236973的博客
12-05 1116
Umi项目创建
创建Umi项目
weixin_45204443的博客
03-20 735
关于umi的创建
基于umiantdmobile的移动端项目模板
08-10
umi的路由管理使得在`pages`目录下创建新页面变得简单，而antd-mobile的组件可以直接引入到页面中使用，例如`<Button>`、`<List>`等。 此外，umi还支持ES6语法、JSX、CSS Modules等现代前端技术，并可以通过Webpack...
记一次umi开发后台管理系统的基础使用
01-08
本文将详细介绍umi的基础使用方法，为初学者提供一个快速上手的教程。 ### 1. 了解umi umi是一个强大的前端开发工具，它集成了路由、状态管理、代码分割、按需加载等功能，使得开发者可以更专注于业务逻辑，而无需...
基于umi@4.x + antd-mobile@next 快速构建h5及网页app应用.zip
02-08
创建新项目时，可以使用umi的脚手架工具，如`umi create umi-antd-mobile-app my-app`，这将自动为你生成一个预配置的项目结构，包含必要的依赖和配置文件。 在项目中，umi的路由管理（`src/routes`）可以帮助你...
创建umi项目
qq_38372612的博客
03-04 208
https://pro.ant.design/docs/getting-started-cn 安装依赖 npm install 启动 npm start
安装umi及使用umi脚手架创建项目
hxbao的专栏
01-18 1470
简要介绍前端如何安装及使用umi脚手架创建项目
使用Umi搭建React项目
owo_ovo的博客
12-18 1585
使用Umi搭建React项目
React UmiMax搭建项目
m0_67011584的博客
12-11 1842
来管理 node 版本(建议找一篇关于`nvm下载安装`的相关博客自行安装)umi官网会自动帮我们生成框架。// 下载指定版本node。// 检查当前node版本。1. 找个地方建个空目录。2. 通过官方工具创建项目。3. 安装 pnpm。// 全局安装pnpm。// 查看pnpm版本。// 检查nvm版本。2. 安装 node。// 切换到指定版本。// 查看当前镜像源。// 切换淘宝镜像源。
react+umi项目搭建
qq_31666019的博客
10-10 75
第三步：npm install -g yarn。第一步：新建文件夹用vscode打开。第三步：yarn start。
搭建react+ant design pro+umi 项目框架
【爱打盹的喵】的专栏
12-24 2405
我搭建react+antd+umi这个框架的原始资料主要是来源于而我写这篇文章的本意就是用来记录我用搭建时候的步骤汇总。
React和umi搭建项目的操作步骤，以及新建项目的目录结构的区别
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
02-22 1329
前提1：nodejs v8版本及以上+浏览器运行前提2：yarn全局安装配置。前提：umi官网路由。前提：全局安装umi。
使用umi怎么创建react项目
06-13
使用 UmiJS 创建一个 React 项目非常简单，只需要按照以下步骤操作即可： 1. 全局安装 UmiJS：`npm install -g umi` 或 `yarn global add umi` 2. 创建新项目：`umi create app` 3. 根据提示选择项目模板和插件，可以选择 `react` 模板和其他需要的插件。 4. 安装项目依赖：`npm install` 或 `yarn install` 5. 运行项目：`npm start` 或 `yarn start` 这样，UmiJS 就会启动一个本地开发服务器，并在浏览器中打开一个新页面，展示您的 React 应用程序。您可以开始编写代码并编辑页面了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值