首页 > TAG信息列表 > UMI

React + Dva + Antd + Umi 快速入门

  最近一个项目用了React + Dva + Antd + Umi 技术栈   基础框架概念 React前端三大框架之一。Dva由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。Antd是阿里的一套开箱即用的中台前端/设计解决方

hash

hash 让生成的文件包含hash后缀，适用于增量发布和避免浏览器加缓存(短时间内发布多个版本，不发生变化)。 打包后的文件会增加哈希 如： umi.df723s.js 添加 hash:true import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'no

amis-umi-antd搭建始末

创建项目目录 安装 yarn create @umijs/umi-app 执行yarn安装相关插件 修改.umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout ··· import { defineConfig } from 'umi'; export default defineConfig({+ layout: {}, routes: [ { path: '/', component:

UmiJS开发技巧

UmiJS开发技巧 洛竹  2020年06月23日 18:48 ·  阅读 11807 关注 鉴于 UmiJS 是重度的封装了很多工具和功能，对于刚接触的人形成了一层技术壁垒（大佬请忽略这句话）。所以我总结了使用UmiJS 开发中遇到的坑和技巧。 本地开发 umi dev 时关闭 mock 参考: 希望本地开发 umi

umi的HTML 模板

HTML 模板 修改默认模板 新建 src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板，比如： <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Your App</title> </head> <body> <div id="root">

umi搭建项目 多语言切换 遇到的不能解析的问题

问题：浏览器刚进来的时候，页面不能解析正确的语言解决：useEffect(() => { if(!window.localStorage.getItem("umi_locale")){ //关键 setLocale('en-US', false);//关键 } let language = navigator.language; if (getLocale() === 'zh-CN') { setLocale('

第一篇——React+dva+umi

1. npm create umi   2. ? Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.❯ app - Create project with a simple boilerplate, support types

dva处理_umi项目中dva effects异常处理

问题描述： 1、使用Antd的Modal的Confirm 如果返回一个Promise，它会自己关闭 loading状态。在使用过程中，已经返回了Promise，在后端报错的时候，loading并没有消失，当时的临时处理方案为，在相应的 effects添加 try catch // Effects *getList({ payload }, { call }) {undefined 　　try {u

UmiJS开发之——快速上手

一 Umi是什么 Umi，中文可发音为乌米， 是蚂蚁金服的底层前端框架，也是可扩展的企业级前端应用框架Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展Umi配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业

【UMI】如何在umi中执行node脚本

需求:假如我有些node脚本需要在umi跑build时执行,比如修改项目中某些文件的内容.   如果,我将这个脚本的方法暴露出来,放到.umirc.ts这个文件中执行会怎么样? 可以,但是由于umi的更新机制,脚本会执行两次.而且每次修改.umirc.ts也会导致脚本执行,会多余执行好多次.   正确的做法

【UMI】路由懒加载

原生的路由加载是在打包的时候,将所有的组件都打包到一个文件中,然后在首次进入页面的时候就会加载这个包,相当于全量包.接着在你点击路由时去查找相关组件.网络压力全在首屏加载的时候. 路由懒加载:分包,分请求.先分不同的包,然后根据路由从后端请求.加载压力分到每一次路由请求.

大数据表格卡顿处理问题umi-ui

大数据表格卡顿处理问题umi-ui 在开发大型项目或者数据过的项目时候，我们会因为数据量过大而导致表格卡顿问题及其棘手，这里我就推荐大家可以试试使用umi-ui组件库，几万数据无卡顿方便很多 ，而且是基于element-ui去做的，我自己也是尝试过ant design vue都能按需引入不冲突 下面我

umi，设计思想与代码质量优化+程序性能优化+开发效率优化

.catch(error => { message.error(error); }); } // -----------------------------------使用封装后的request--------------------------------------------- type EditRecordParamsType = { id: number |undefined; value: FormValues; }; export async function getRemot

umi入门之基础

文档：Directory structure 1.项目结构 umi项目的初始结构是这样的 . ├── package.json ├── .umirc.ts ├── .env ├── dist ├── mock ├── public └── src ├── .umi ├── layouts/index.tsx ├── pages ├── index.less

羽未「umi」

前言 首先这道题要把题读对，而且不能在考试还剩 10 分钟的时候才读对。

Umi-antd后台管理遇到的坑

1.在用到antd里面的tree/treeSelect组件的时候，不能将带有tree的子组件放在父组件里面写，不然会出现点击tree组件，子组件重新渲染的问题（刷新/闪动），解决办法 子组件放在父组件外面，通过传值的方法实现，如果子组件中需要控制模态框=> 父组件 <a onClick={() => handleRoleModalVisible(

react umi实战

umi umiJs是一个类Next.JS的react开发框架它基于一个约定，即pages目录下的文件即路由，而文件则导出react组件。然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各个场景里面 初始化项目 npm i umi -g umi g page index dev也是基于webpack-d

umi-request 网络请求之路

umi-request 网络请求之路 背景 在做中台业务应用开发的过程中，我们发现在请求链路上存在以下问题： 请求库各式各样，没有统一。 每次新起应用都需要重复实现一套请求层逻辑，切换应用时需要重新学习请求库 API。各应用接口设计不一致、混乱。 前后端同学每次需重新设计接口格式，前

前端项目打包优化

前言 一个umijs项目,打包后发现体积过大,想优化, 看到各种博客上的优化手段是基于webpack的,于是我花了几天把项目转成webpack5的, 优化打包后比原来还大.... 最终还是在原来的umijs基础上进行了优化. 打包分析 umi项目在package.json加一个脚本语句 "analyze": "cross-env ANALY

umi3 + qiankun 快速搭建微应用实践

1、创建主应用mian-pro 1-1）umijs创建项目： mkdir main-pro && cd ./main-pro && yarn create @umijs/umi-app 1-2）安装依赖和qiankun插件： yarn yarn add @umijs/plugin-qiankun -D 1-3）配置.umirc.ts 需要修改路由和配置qiankun为应用入口 routes: [ { path: '/', comp

Umi-request 创建多个request文件，但拦截器相互污染

需求 业务上的需要，request的配置上区别很大，所以建了两个request请求文件，对应的接口调用对应的request 问题 在两个文件的拦截器中log，会发现发起一个请求，两个拦截器都有进入 Code 两个文件不好演示，使用放在一个文件，建两个实例 const http1 = extend(); const http2 = extend

umi dva demo

model import {routerRedux} from 'dva/router' //routerRedux实现在effcts中路由跳转 export default { namespace:"user", state:{ userInfo:{ name:"name0", age:"0" } }, subscription:{}, effects:{

umi 样式隔离

前言 在使用umi日常开发项目，有时候样式之间会有污染，需要在class增加一个className来区分   具体内容 const PrefixWrap = require("postcss-prefixwrap"); const rootId = 'xxx' export default { ... cssLoaderOptions: { modules: true, getLocalIdent: (context, l

【react】基于umi框架编写轮播图组件

引言 基于该文仿写：web 完整轮播图——带只拖鞋去流浪 https://zhuanlan.zhihu.com/p/138232728 组件源码：https://gitee.com/leftstan/rotation.git 组件效果：https://www.jianguoyun.com/p/Dd81zscQzLDdCRiKuo4E       创建项目 创建一个umi2.x的项目 选择项目类型为app，不使用t

react umi 框架之数据传递connect

reducers: { save(state, action) { console.log('getAlarmStatus6', action.payload); return { ...action.payload, }; }, /** * 重置 state */ resetState() { return {}; }, }, save方法返回的数据是st