一、配置项
- hash: 配置是否让生成的文件包含
hash
后缀,通常用于增量发布和避免浏览器加载缓存。hash: true,
- base: 设置路由前缀,通常用于部署到非根目录。
base: '/dengta/',
- publicPath: 打包的时候,webpack会在静态文件路径前面添加
publicPath
的值;publicPath: 'http://xxx.com.cdn'
;静态资源指的是:script的src,link中的href等等; - outputPath: 指定输出路径;默认打包到dist文件夹下;可以通过 outputPath 去更改;
- title: 设置网站title;
- history: 路由的显示形式,
history: { type: 'hash' },
使用hash,路由在路径之前会默认加一个#,比如localhost:8000/#/path1
; - targets:
targets: { ie: 11 },
配置需要兼容的浏览器最低版本; - proxy:
proxy: {
'/api': {
'target': 'http://jsonplaceholder.typicode.com/',
'changeOrigin': true,
'pathRewrite': { '^/api' : '' },
},
},
访问 /api/users
就能访问到 http://jsonplaceholder.typicode.com/users
的数据。
proxy仅在dev时生效。
- theme: 配置主题,实际上是配less变量;
theme: {
'@primary-color': '#1DA57A',
},
- routes: 路由配置;
- chainWebpack: webpack相关配置;
二、路由
在 umi 中,应用都是单页面应用,页面地址的跳转都是在浏览器端完成的,不会重新请求服务端获取html,html只在应用初始化时加载一次;
页面的切换其实就是组件的切换,只需要配置中把不同的路由路径和对应的组件关联上。
新建函数式组件,输入rsc,点击tab键, 会格式化函数式组件的代码;
wrappers: 配置路由的高阶组件封装;比如:可以用于路由级别的权限校验;
路径进入/user,不会直接进入user组件,需要经过wrappers的处理,再决定。
export default {
routes: [
{ path: '/user', component: 'user',
wrappers: [
'@/wrappers/auth',
],
},
{ path: '/login', component: 'login' },
]
}
export default {
routes: [
{ path: '/login', component: 'login' },
{
path: '/',
component: '@/layouts/index',
routes: [
{ path: '/list', component: 'list' },
{ path: '/admin', component: 'admin' },
{ component: '@/pages/404' }, // 如果匹配不到路由,就加载这个组件
],
},
],
}
路由
{ path: '/user/:id', component: 'user' } // 在组件中,可以通过props拿到id的值
{ path: '/user/:id?', component: 'user' } // id可有可无
三、页面跳转
在Umi里,页面之间跳转有两种方式:声明式和命令式。
声明式:通过Link使用,通常作为React组件使用;
import { Link } from 'umi';
export default () => (
<Link to="/list">Go to list page</Link>
);
import { NavLink } from 'umi';
<NavLink to="/list">Go to list page</NavLink>
<NavLink to="/cover">Go to cover page</NavLink>
// 使用NavLink,被激活的组件拥有一个class,名叫active
.active {
color: #13c2c2;
font-size: 22px;
}
命令式:通过history使用,通常在事件处理中被调用;
import { history } from 'umi';
function goToListPage() {
history.push('/list');
}
四、HTML模板
新建 src/pages/document.ejs
,umi 约定如果这个文件存在,会作为默认模板,比如:
ejs模版引擎
BootCDN第三方资源
bootstrap 模版样式中的一种
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Your App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
五、Mock数据
https://umijs.org/plugins/plugin-request
在package.json文件中:找到@umijs点进去,进入request插件
或者在导航栏中寻找:文档、配置、API、指南、插件;
在mock文件夹下写好接口,通过useRequest请求接口
六、DvaJS
https://umijs.org/zh-CN/plugins/plugin-dva
数据流方案:
import { request } from 'umi';
export default {
// 调用model的时候,通过命名空间调用,不要和其他的model同名
namespace: 'tags',
// 状态,和react中的state类似,和redux中保存的state一样
state: {
tagsList: [],
},
// 更新state
reducers: {
setTagsList(state, { data }) {
return {...state, tagsList: data}
}
},
// 调用服务端接口,获取数据
effects: {
*fetchTags({ payload, callback }, { put, call }) {
// 获取tags数据
const res = yield call(request, '/api/tags', { ...payload });
// 调用reducer
yield put({
type: 'setTagsList',
data: res,
});
}
},
}
组件:
import { connect } from 'umi';
const Dva = (props) => {
const { tags, loading, dispatch } = props;
useEffect(() => {
dispatch({
type: 'tags/fetchTags', // 命名空间/方法
payload: null,
})
}, []);
console.log('tags', tags);
console.log('loading', loading);
return (
<div>Dva的应用</div>
);
};
export default connect (({tags, loading}) => ({tags, loading}))(Dva);
// 会将tags作为props传给Dva;
七、运行时配置
八、Umi UI
配置 “start:umi-ui” : “UMI_UI=1 umi dev”
运行时,选择 npm start:umi-ui
九、封装请求方法
请求拦截器
https://github.com/umijs/umi-request#interceptor
发送请求时,使用request,可以自己封装一层(有请求拦截器和响应拦截器):
import request from 'umi-request';
import { message } from 'antd';
// 请求拦截器
request.interceptors.request.use((url, options) => {
return {
url: `${url}`,
options: { ...options, interceptors: true, headers: {Hello: 'hello'} },
// 这里的headers是在请求头中,加了Hello字段
};
});
// 响应拦截器
request.interceptors.response.use(response => {
if (response.status > 400) {
const codeMaps = {
404: '未找到',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。',
};
message.error(codeMaps[response.status]);
}
return response;
});
export default Zidingrequest;
引用封装好的 Zidingrequest
import Zidingrequest from '../utils/request';
export const getTags = () => {
return Zidingrequest('/api/tags');
};
十、Ant Design PRO
https://pro.ant.design/zh-CN/docs/getting-started