react-umi-2.8使用umi块(umi ui)部署首页

最新推荐文章于 2024-07-18 16:40:00 发布
最新推荐文章于 2024-07-18 16:40:00 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： umi3+egg中台实战项目 文章标签： javascript reactjs typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echo_Ae/article/details/110851256
版权
本文介绍了在umi 3.x版本后如何通过umi UI来安装和使用umi块模板，详细步骤包括安装umi UI、配置dva、添加分析页到项目以及解决块代码问题。最后展示了修改代码以适应需求的方法，并预告了动态路由的实现。
摘要由CSDN通过智能技术生成

效果图：

umi2.x版本之前安装都是这样安装的

可是umi3.x版本之后你会发现文档没有  块  这文档，反而只有一个使用 umi UI

哈哈哈，没错如果我们要使用umi提供的块模板，只能通过umi UI 来进行安装，下面开始介绍umi ui如何安装

yarn add @umijs/preset-ui -D

了解本专栏 订阅专栏 解锁全文 超级会员免费看
An_s
关注
专栏目录
订阅专栏
Ant Design Pro V4 和umi-ui使用步骤
Gonwe的博客
01-14 3966
Ant Design Pro V4 和umi-ui使用步骤
标题：提升开发效率的利器：Umi UI —— Umi 研发工作台
gitblog_00067的博客
06-10 333
标题：提升开发效率的利器：Umi UI —— Umi 研发工作台 项目地址:https://gitcode.com/umijsumi-ui/umi-ui 一、项目介绍 Umi UI 是专为 Umi 框架设计的一款研发工作台，它提供了一系列可视化的辅助编程（VAP）插件，旨在帮助开发者更高效地进行 Umi 项目开发。这个直观的工作台不仅简化了复杂的命令行操作，还提供了便捷的资产管理功能，让团队协作...
快速上手企业级前端开发：深入理解 UMI 框架
最新发布
ztK63LrD的博客
07-18 2202
UMI是蚂蚁金服的底层前端框架，也是一个基于React的企业级前端应用框架，它提供了开箱即用的项目脚手架和插件化的配置，如路由构建、部署测试、文档工具、请求库等，帮助开发者快速搭建和管理复杂的前端项目，其设计目标是提高前端项目的开发效率和可维护性，尤其适用于大型复杂项目的开发与管理。
Windows、Umi UI
fearlessnesszhang的博客
12-20 1721
如果需要创建Umi UI项目，那么需要添加umi插件。 1.下载node.js 下载地址：https://nodejs.org/en/ 下载之后安装（这时可以使用npm） 这里可以参考一下：https://www.jianshu.com/p/1ab93268ddac 修改一下安装目录，并且按照其中的将需要的路径添加在 环境变量 > 系统变量 > path 2....
使用UMI仿今日头条首页
zerobaek的博客
09-03 316
创建UMI项目 全局安装umi npm install umi -g 全局安装create-umi npm install create-umi -g 使用create-umi指令 create-umi 安装依赖 npm i 启动项目 npm start 修改配置文件 umi 允许在.umirc.js或config/config.js（二选一，.umir...
探索未来开发新境界：Umi UI
gitblog_00076的博客
06-10 389
探索未来开发新境界：Umi UI 项目地址:https://gitcode.com/umijsumi/umi-ui Umi UI 是一款专为 Umi 框架打造的研发工作台，它带来了一整套可视化的辅助编程插件，旨在提升开发效率，优化开发体验。这个强大的工具让开发者可以更加高效地管理Umi项目，提供直观的任务视图和丰富的资产操作功能。 一、项目介绍 Umi UI 不仅仅是一个简单的IDE扩展，而是一个...
微前端umi + qiankun从搭建到部署的实践
Mine____的博客
07-01 4017
近期在项目中需要使用qiankun实现微前端的微服务化，分享记录一下搭建的过程以及遇到的问题 项目框架 整体为umi搭建的主应用，两个子应用均为create-react-app搭建，进入系统，菜单main为主应用页面，点击菜单sub-react切换第一个子应用，菜单sec-sub切换第二个子应用， 项目根目录下是主应用,child文件夹下为子应用sub-react，sec-sub，搭建后的初始目录结构如下： 主应用配置 非umi搭建主应用 主应用负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器
使用umiJs框架搭建的react项目react-umi-master.zip
07-03
使用umiJs框架搭建的react项目react-umi-master.zip
react-umi可插拔的企业级react应用框架
08-14
React Umi 是一个高度可插拔的企业级 React 应用框架，它旨在简化大型复杂项目的构建过程，同时提供丰富的功能和灵活性。Umi 由阿里系的 umijs 团队开发，它以路由为中心，借鉴了 Next.js 的一些设计理念，如约定式...
react-multi-select：使用和用于React构建的Multi Select组件
02-04
多选 Kenshoo多选择组件 多选是一种直接的组件，可帮助用户以清晰且可过滤的方式选择多个项目。 安装 使用npm安装： npm install @kenshooui/react-multi-...import React , { Component } from " react " ; import M
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于React。 用法 安装 使用您最喜欢的依赖项管理器安装库： yarn add react-checkbox-tree 使用npm： npm install react-checkbox-tree --save 注–此库使用了样式，并...
umy-ui:umy-ui，一套为开发者准备的基于Vue 2.0的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题
03-18
umy-ui一套为开发者准备的基于Vue 2.0的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题 回答下那些看见umy-ui的React哈，首先不要去看UI两字，我们是想后续做更多组件。所以搞成UI库。你完全可以按需发布库里面的表格组件，然后使用其他所以不要觉得是你在安装一个UI库，让你去使用一个UI库，并非如此！如果你只是想解决表格卡顿，你只需要关注umy-ui里面的表格组件！ umy-ui叫（U米-ui） （更多问题请加入umy-ui交流群吧），不需要您的捐赠，只需要单击上方的Star ！！！ QQ交流1群：675286117已满员 QQ交流2群：939125115新群未满员 安装 npm安装 推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用 npm install umy-ui CDN方式 <!--引入表格样式--> < link r
UmiJs学习V1.0.0
04-30
此文档主要讲了umijs、antd、dva的使用；umi-dva-user-dashboard详细的介绍了，如和搭建工程、简单的编写了一个登录页面和用户页面列表、新增、修改及删除等功能。
react-md-editor：一个简单的带有预览的markdown编辑器，使用React.js和TypeScript实现
02-04
一个简单的带有预览的markdown编辑器，使用React.js和TypeScript实现。 这个React组件旨在为一个简单的Markdown编辑器提供语法高亮显示支持。 这是基于textarea封装的，因此它不依赖于任何现代代码编辑器，例如Acs，...
Ant Design Pro V4 + umi-ui 基于区块开发
原来你来过
02-28 1198
简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。 区块是研发资产的一种，它是一系列快速搭建页面的代码片段，它可以帮助
Umi UI 小图标的内容不显示（已解决）
m0_58002936的博客
07-24 2067
在hosts文件添加。
‘UMI_UI‘ 不是内部或外部命令，也不是可 运行的程序
weixin_46344410的博客
06-15 1526
#Win10环境下报错 'UMI_UI' 不是内部或外部命令，也不是可 运行的程序 #解决方案 "script":{ "start:umi-ui": "set UMI_UI=1 && umi dev", }
antd+umi项目的一些官网及有用网站的参考地址
weixin_44258574的博客
08-09 2802
antd+umi项目的一些官网及有用网站的参考地址
关于umi ui图标未显示问题
m0_68516464的博客
02-17 2794
umi-ui图标不显示，umi版本问题，ant-design-pro版本问题
umi使用react-monaco-editor并高亮显示代码
05-12
首先，你需要安装 `react-monaco-editor` 和 `monaco-editor` 两个库： ``` npm install react-monaco-editor monaco-editor ``` 然后在你的组件中引入 `react-monaco-editor`，并且设置 `options` 属性，其中 `language` 属性设置为你要高亮的代码语言。比如，这里我们设置为 `javascript`。 ``` import React, { Component } from "react"; import MonacoEditor from "react-monaco-editor"; class MyEditor extends Component { editorDidMount(editor) { console.log("editorDidMount", editor); editor.focus(); } render() { const code = "// type your code..."; const options = { selectOnLineNumbers: true, roundedSelection: false, readOnly: false, cursorStyle: "line", automaticLayout: false, language: "javascript" }; return ( <MonacoEditor width="800" height="600" language="javascript" theme="vs-dark" value={code} options={options} onChange={this.onChange} editorDidMount={this.editorDidMount} /> ); } } export default MyEditor; ``` 这样，你就可以在 `react-monaco-editor` 中高亮显示代码了。如果你需要高亮其他语言的代码，只需要将 `language` 属性值设置为对应的语言即可。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值