Umi + AntD Pro 项目搭建-CSDN博客
Umi + AntD Pro 项目搭建
baroncoder
已于 2022-08-29 20:24:05 修改
1582
收藏
12
文章标签：
javascript
开发语言
ecmascript
于 2022-08-25 14:32:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baroncoder/article/details/126518977
版权
一、Umi 介绍
umi 是可扩展的企业级前端应用框架，Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。
create-react-app 对比：
create-react-app 是基于 webpack 的打包层方案，包含 build、dev、lint 等，他在打包层把体验做到了极致，但是不包含路由，不是框架，也不支持配置。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。
与nextJs 对比：
next.js 是个很好的选择，Umi 很多功能是参考 next.js 做的。要说有哪些地方不如 Umi，我觉得可能是不够贴近业务，不够接地气。比如 antd、dva 的深度整合，比如国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等一线开发者才会遇到的问题。
官网链接：https://umijs.org/zh-CN/docs
二、项目创建
创建一个空文件夹作为项目的根目录：/umi在目录终端创建项目
1、yarn create @umijs/umi-app
2、npx @umijs/create-umi
下载安装包
1、yarn
2、npm install
启动项目
yarn start
 项目启动成功界面​
二、简单使用
        umi创建后已经帮我们配置好了一些插件，其中最主要的是 @umijs/preset-react，它包含了很多插件              
    所以项目可以直接使用antd 组件
import styles from './index.less';
import { Pagination } from 'antd';
export default function IndexPage() {
return (
<div>
<h1 className={styles.title}>Page index</h1>
<Pagination defaultCurrent={1} total={50} />
</div>
);
   页面效果    
三、项目结构
 其中 public 与 config 为新建文件，用来存放静态文件及 核心配置
四、修改配置目录
五、配置路由
简单路由 export default [
path: '/',
component: '@/pages/index'
},
path: '/hello',
component: '@/pages/hello' // 也可以写作 'hello' 相对路径，会在 src/page 下找
] 嵌套路由 export default [
path: '/',
component: '@/pages/index'
},
path: '/hello',
component: '@/pages/hello' // 也可以写作 'hello' 相对路径，会在 src/page 下找
},
path: '/user',
routes: [
path: '/user/add',
component: '@/pages/user/add'
] 公共模版 创建公共页头和页脚 header footer 模块 在pages 同级创建 components/Header/index.tsx 文件 import React from 'react';
const Header = (props: any) => {
return (
<div>
<h3>主页/菜单项</h3>
{props.children}
</div>
);
};
export default Header; 路由部分引入模版组件 export default [
path: '/',
component: '@/pages/index'
},
path: '/hello',
component: '@/pages/hello' // 也可以写作 'hello' 相对路径，会在 src/page 下找
},
path: '/user',
component: '@/components/Header',
routes: [
path: '/user/login',
component: '@/pages/user/login'
},
path: '/user/quit',
component: '@/pages/user/quit'
六、跳转方法
声明式跳转 <link to="">  为 umi 自带的声明式跳转路由方法 import React from 'react';
import { Link } from 'umi'
const Header = (props: any) => {
return (
<div>
<h3>主页/菜单项</h3>
<Link to='/user/login'>登录</Link>
/<Link to='/user/quit'>退出</Link>
{props.children}
</div>
);
};
export default Header; <NavLink to=""> 专门用于导航栏，点击导航栏时，标签会默认添加 active class类，可以通过此类添加样式命令式跳转 （使用 umi 的 history 函数） import React from 'react';
import { NavLink, history} from 'umi'
import './index.less'
import { Space, Button } from 'antd'
const Header = (props: any) => {
const gotoLogin = () => {
history.push('/user/login')
const gotoQuit = () => {
history.push('/user/quit')
return (
<div>
<h3>主页/菜单项</h3>
{/* <NavLink to='/user/login'>登录</NavLink>
/<NavLink to='/user/quit'>退出</NavLink> */}
<Space>
<Button onClick={gotoLogin}>去登陆</Button>
<Button onClick={gotoQuit}>退出</Button>
</Space>
{props.children}
</div>
);
};
export default Header;
七、mock 数据与接口请求
mock 在umi 中是默认启动的，用来模拟api 数据添加 mock 文件，只要在 外层 mock 目录中的文件 都会被拆解成 mock 文件  ，新建文件mock/mock.ts export default {
'GET /mock/list': [
id: 1,
name: '张三'
},
id: 1,
name: '李四'
} // 同步请求
const mockTest = () => {
request('/mock/list').then(res => {
console.log(res)
})
// 异步请求
const mockTest = async () => {
const res = await request('/mock/list')
console.log(res)
} MockJs 工具使用， 可以通过代码随机生成数据 引入 Mockjs 包 yarn add mockjs import mockjs from 'mockjs'
export default {
'GET /mock/citys': mockjs.mock({
'list|100': [{name: '@city', 'value|1-100': 50, 'type|0-2': 1}]
})
八、Dva的使用
dva 其实就是个管理数据流的框架，可以更好的在组件之间共用数据，避免了层层 props 传参，也就是dva 是一个数据管理中心符合以下规则的被认为是一个model 数据站 （1）src/models 下的文件 （2）src/pages 下，子目录中 models 目录下的文件 （3）src/pages 下，所有的 model.ts 文件（不区分大小写）Model 的结构 在src 目录下创建一个 models 文件夹，内部创建一个 msg.ts 文件，结构如下 export default {
namespace: "dva", // 命名空间，确保唯一
state: {}, // 存放数据
effects: {}, // 接口调用 -- 请求数据
reducers: {} // 更新状态 -- 修改数据
} 通过指令识别 是否创建成功： umi dva list model namespace：当前model的命名空间，同时也是全局 state 上的一个属性state：数据初始值effects：effect 要点如下（难点） （1）处理异步操作 （2）需要通过 put 调用 reducers 更新 state （3）只能是 generator 函数，有 action 和 effects 两个参数。其中 effects 包含put、 call、 sellect 三个字段，put 用于触发 action， call 用于异步处理逻辑  dva  连接,  在 pages 下创建一个 msg.tsx 文件 import React from 'react';
import {connect} from 'umi'
const Msg = () => {
return (
<div>
<h1>Dva 测试</h1>
</div>
export default connect(({msg}) => ({msg}))(Msg) connect 的作用是 将数据绑定到组件上  dva  数据使用步骤 （1）src 目录下创建 services/api.ts 文件 import { request } from 'umi'
export async function getCitys() {
return request('/mock/citys')
} (2)  models/msg.ts  dva 文件调用上面接口保存数据 import { getCitys } from '@/services/api'
export default {
namespace: "msg", // 命名空间，确保唯一
state: {
cityList: [],
}, // 存放数据
effects: { // 接口调用 -- 请求数据
//payload 获取组件中参数，例如表单提交获得到的数据
//callback 回调函数，例如提交成功后跳出一个提示框
//put 触发action
//call 访问外部方法，获取外部数据 call(方法，方法传参)
* queryCityList({payload, callback}, {put, call}) {
//获取tags数据,yield实现异步
const res = yield call(getCitys)
//调用reducers，更新state
yield put({
type: 'setCityList', // 类似于 redux 中 action 的 type
payload: res
})
},
// 是一个纯函数，用于处理同步操作，是唯一可以修改 state 的地方，由 action 触发，有 state 和 action 两个参数
reducers: { // 更新状态 -- 修改数据
setCityList(state, action) {
return {...state, cityList: action.payload}
} （3）页面内部使用dva   import React from 'react';
import {connect} from 'umi'
import { Button } from 'antd'
const Msg = (props: any) => {
const {dispatch} = props;
const list = props.msg.cityList.list || []
const getData = () => {
// 使用 model 获取数据
dispatch({
type: 'msg/queryCityList',
payload: null
})
return (
<div>
<h1>Dva 测试</h1>
<Button onClick={getData}>获取列表数据</Button>
<table>
<tr><th>城市名</th><th>数量</th><th>城市类型</th></tr>
list.map((item, index) => {
return <tr key={index}>
<td>{item.name}</td>
<td>{item.value}</td>
<td>{item.type}</td>
</tr>
})
</table>
</div>
export default connect(({msg}) => ({msg}))(Msg) 因为 export default connect(({msg})=>({msg}))(Msg); 把数据都传到了Msg里面的props.msg, 通过其中的 dispatch 发送action获取我们的数据，通过 type: 'msg/queryCityList' 调用 effect 中的 generator 函数
baroncoder
关注
关注
点赞
12
收藏
打赏
知道了
评论
Umi + AntD Pro 项目搭建
umi + antd
复制链接
扫一扫
AntdPro 入门分享beta
u010696334的博客
07-23
314
基础准备
按照常理需要对前端有一定的了解，尤其是es6和React的了解，以AntdPro为模板快速开启项目，可以发挥模仿的功夫照着做，我认为大概了解的有如下2个文档
https://www.runoob.com/w3cnote/es6-tutorial.html ES6，js新的标准，目前有更为新的标准，目前大家普遍解析比较好的还是ES6这个版本
https://www.runoob.com/react/react-tutorial.html React，大致了解，项目就是基于这个开发
开发...
FAQ: antd pro/umi 添加区块错误
01-08
虽然按照antd pro/umi官网构建的项目，
执行添加模块操作时：
$ umi block add EmptyPage
$ umi block add https://github.com/umijs/umi-blocks/tree/master/demo
报出异常类似：
× error AssertionError [ERR_ASSERTION]: C:\Users\用户名\.umi\blocks\github.com\umijs\umi-blocks\EmptyPage don't exists
解决方法：
到官方下载所有模块。
解压添加到C:\Users\用户名.u
参与评论
您还未登录，请先
登录
后发表或查看评论
怎么修改antd mobile中picker样式_基于umi、antd的前端工程优化实践
weixin_39915721的博客
11-30
551
umi是蚂蚁金服推出的一个围绕React技术栈的前端框架，目前它已经成为我在项目中必不可少的一部分，再配合antd的UI组件库能极大提高项目的开发效率。今天我想谈一谈在前端领域中有哪些优化的策略可以提升用户体验。本篇文章使用的umi版本是2.x，antd版本是3.x，新版umi和antd可能会影响下面的配置方式。优化这个词对我来说可能太过空洞，毕竟项目本身也没大到出现很严重的性能问题，我只是根据现...
react-3-创建一个简单的antd项目
最新发布
02-21
30
react-3-创建一个简单的antd项目
react+UmiJS+Antd Pro简介
是草莓味的啊
03-10
1593
react+UmiJS+Antd Pro简介
react+umi+antd项目搭建常用配置
Dancy的博客......
02-23
4425
还记得上一次写React项目还是写的class component，不知不觉，React已经进入了使用hooks的时代。今天，就先跟大家分享说明一下项目中常用的配置，以后时间再写一篇关于hooks的专题文章。
很久没有写文章了，如有问题欢迎留言评论，也请朋友们多多包涵！
先来一波官方文档链接：
UmiJS官方文档
React官方文档
Ant Design官方文档
一、项目搭建
对于react umi项目搭建，umi官方文档已经写的很清晰了，具体请查看上面的umi官方文档链接。这里我不再详细说明，着重说明一些
React、Umi、Dva、AntD Pro之间的关系---kalrry
kalrry
01-06
1507
React、Umi、Dva、AntD Pro之间的关系---kalrry一、官方链接二、共同点三、UmiJS框架1、简介2、Umi特性：四、关于Dva框架1、简介2、Dva特性：3、dva数据流向4、核心概念:
一、官方链接
React
Umi–路由配置
Dva–数据流方案
Ant Design Pro
集成了umi、dva、antd的完整前端脚手架
二、共同点
Umi和Dva都是基于React的框架，Umi主要以路由为主，Dva主要管理数据流。
三、UmiJS框架
1、简介
umi是一个可插拔的企业级re
小白视角学antd umi（一） - 创建项目
mayazure的博客
09-24
752
这一系列文章以纯小白的视角介绍一下antd design的umi框架。文章全部基于umi 3.x版本，重点关注umi的基础使用和配置，比较偏实用，不会涉及原理和底层代码分析（因为底层啥样我也不知道~以后有时(xin)间(qing)再去研究研究）。
另外小白视角是针对umi框架而言的，读者仍然需要具有以下基础知识：React, Ant design。如果要配合dva使用的话，还需要了解redux(react-redux), redux-saga。
一、创建项目
这里介绍两种脚手架创建umi项目的方法。
umi
利用umi3.4的框架引用antd的一个简单的布局
qq_45736175的博客
05-30
1136
1.先看官网的布局有哪些样式（https://ant.design/components/layout-cn/）
此次我将引用如下的布局：
2.在项目的src目录下新建一个layouts目录，并在该目录下新建一个index.js
因为在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件
所以我们需要把布局的代码写在该index.js中
import React from 'react';
import { Layout } from 'antd';
con
react+umi+antd----umi项目的上手教程（转载）
蓝冰凌的博客
06-02
6081
umi+dva项目快速上手指南
react+umi+dva+antd umi项目的上手教程。转载而来，仅用于给人学习。
构建项目
node环境
node版本 >= 8.0.0
全局安装umi
npm install -g umi
建议使用yarn安装
// 全局安装yarn
npm install -g yarn
// 使用yarn安装umi
yarn global add umi
构建umi项目
mkdir myapp && cd myapp..
antd umi搭建react环境
qq_35631170的博客
03-31
777
这里写自定义目录标题
1.安装node.js环境
1.1.安装
傻瓜式下一步：
下载完成后双击下载好的可执行文件开始安装，点击next进入下一步，勾选同意协议，继续下一步。然后选择安装的位置，默认是在C盘，改成D盘安装，这是个好习惯，建议保持。然后进入模块配置步骤。
安装完成之后，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号
1.2...
umi搭建react+antd项目（一）环境配置
热门推荐
侞婼冇罪
11-13
1万+
1.先创建文件夹，windows用户手动创建就行了
mkdir myReact && cd myReact
2.在myReact目下，执行脚手架命令，默认选择antd
yarn create umi
创建项目成功：
3.输入yarn安装node模块
4.运行项目：yarn start
5.访问http://localhost:8000/
6目录...
antd pro react项目 umi dev 修改默认端口号方法
谨言不言☞博客
11-14
1271
antd pro react项目 umi dev 修改默认端口号方法
"start": "set PORT=2020 && umi dev",
从零开始搭建Umi项目
wendy_monkey的博客
04-25
1256
从零开始搭建Umi项目
文章目录从零开始搭建Umi项目环境准备一、脚手架
环境准备
首先得有 node，并确保 node 版本是 10.13 或以上。
推荐使用 yarn 管理 npm 依赖
一、脚手架
新建项目目录
$ mkdir myumi && cd my umi
创建项目
$ yarn create @umijs/umi-app
#或 npx @umijs/umi-app
我的电脑使用yarn搭建umi报错，不是内部或外部命令，也不是可运行的程序或批处理文件。
改为使用n
umi 项目安装 antd-mobile v5 后报错如何解决
muge1161105403的博客
12-29
2845
在 umi 项目中引入 antd-mobile 时出现了类似下面这样的报错：
These dependencies were not found:
umi antd跨组件数据共享 快速上手理解与应用
OnTheway
06-01
889
搜索关键词umi connect 看到了
antd+ Umi使用中出现的问题集合（一）
weixin_44258574的博客
08-05
894
antd + umijs实现项目过程中遇到的一些问题及解决方案集合
一、filePath not found
二、antd中Modal结合form的复合使用
三、如何预设或清空antd中的日期选择器DatePicker
四、修改主题样式
五、form表单的动态校验
六、antd 在表格中使用气泡确认框 （循环展示了多个气泡卡片）
七、antd实现table中点击具体某一列才展示弹窗
umi + react+antd遇到的问题
qq_39692513的博客
09-01
586
Q1:antd下拉选项偏移，如何固定？
使用getPopupContainer属性
Q2:antd表格table设置width不起效，原因？解决方法？
原因：若当前column字段为超长连续单词或数字就会破坏表格布局。
解决方法：
可为其他column加上宽度，在表格上加上style：style={{ wordBreak: 'break-all' }}，为了美观，还可以给超长连续单词column加上ellipsis属性
Q3:umi更改生成文件的hash值，只添加其他异步文件的ha...
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频
08-23
<p><img src="https://img-bss.csdnimg.cn/202102040205007199.png" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202102040205085328.png" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202102040205146226.png" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202102040205226102.png" alt="" /></p>
Ant Design Pro从0-1创建一个项目
前端小白成长记
11-16
2866
创建
$ yarn create umi my-app
Select the boilerplate type: 选择 Ant Design Pro
❯ ant-design-pro
Which language do you want to use? 选择你使用的语言
❯ TypeScript
JavaScript
$ cd my-app
$ yarn
$ yarn start # 打开浏览器访问 http://localhost:8000
移除语言国际化
yarn run i18n-re
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
baroncoder
CSDN认证博客专家
CSDN认证企业博客
码龄5年
暂无认证
原创
46万+
周排名
19万+
总排名
6627
访问
等级
77
积分
粉丝
获赞
评论
23
收藏
私信
关注
热门文章
GitKraken 小章鱼使用教程
3432
Umi + AntD Pro 项目搭建
1576
（css）div中内容垂直居中
536
moment时间操作
419
useContext使用
201
分类专栏
js
4篇
git
1篇
css
1篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
useContext使用
Canvas 实现图片压缩，返回File图片信息
moment时间操作
2022年8篇
目录
目录
分类专栏
js
4篇
git
1篇
css
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
baroncoder
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值