一、配置项
- 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