一、创建项目-环境准备
安装镜像管理工具节省时间： npm install -g yrm
查看yarm镜像源： yrm ls
切换镜像源： yrm use taobao
测试镜像源下载速度： yrm test
创建项目： 在一个空文件夹下面创建 npm create @umijs/umi-app
项目初始化： npm install
二、目录结构
config.js 一般会拆分出多个文件如：routes、proxy、theme...等
|—— dist //默认的build输出目录
|—— mock //mock 文件所在目录， 基于express
|—— config
|—— config.js //umi配置， .umirc.js 二选一
|—— public //变通的数据资源你目录和一些无需打包的资源
|—— src // 源码目录
|—— layouts/index.js //全局布局
|—— models //数据流
|—— wrappers //权限管理
|—— pages //页面目录，里面的文件即路由
|—— .umi // dev临时目录，需添加到.gitgnore
|—— .umi-production // build临时目录，会自动删除
|—— document.ejs // HTML模板
|—— 404.js // 404页面
|—— pagel.js // 页面 1.任意命名 导出react组件
|—— page1.test.js // 测试用例文件
|—— page2.tsx // 页面2
|—— app.js //运行时配置文件
|—— global.css //约定的全局样式文件，自动引入，也可以用
|—— global.less
|—— .umirc.js //umi配置，同config/config.js，二选一
|—— package.json
|—— .env //环境变量
三、构建时的配置
将.umirc.ts删除 保留config文件夹下的config.js
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
//node_modules 目录下依赖文件的编译方式
type: 'none', // all慢 兼容性好 none 快 兼容性略差
},
routes: [
{ path: '/', component: '@/pages/index' },
],
fastRefresh: {}, //快速刷新可保持组件状态，同时编辑提供即时反馈
devServer: {
port: 8081, //.env里面权限更高一些
// https: true, // 启用https安全访问，于对应的协议服务器
},
title: 'UMI3', //配置标题
favicon: '', //使用本地图片，图片需要放到public文件夹下 或者 使用线上地址
//提供按需加载
dynamicImport: {
loading: '', //指定按需加载时的loading组件
}
});
路由配置
路由分两种：配置路由、约定式路由
配置路由
通过在config.js中添加routes配置来使用
属性解析：
- path： 路径通配符
- component： 匹配后渲染的组件路径，可是绝对或相对
- exact： 是否启用严格匹配，启用时只要跟通配符中不同就匹配不到
- routes： 用于配置子路由，子路由的渲染可以通过在父路由组件中在想渲染子路由的位置上添加一个插槽
<div>{ props.children }</div> - redirect： 配置路由跳转 值为
路径通配符 - wrappers： 配置路由权限校验，与
wrappers文件夹下组件结合来实现 - title： 配置路由的标题
export default [
{
path: '/', component: '@/layouts/baseLayouts',
routes: [
{ path: '/login', component: '@/pages/login' },
{ path: '/reg', component: '@/pages/reg' },
{
path: '/goods', component: '@/layouts/asideLayouts',
wrappers: ['@/wrappers/auth'],
routes: [
{ path: '/goods', component: '@/pages/goods' },
{ path: '/goods/:id', component: '@/pages/goods/goodsDetail' },
{ path: '/goods/:id/comment', component: '@/pages/goods/comment' },
{ path: '/goods/:id/comment/:id', component: '@/pages/goods/commentDetail' },
],
},
{ path: '/', redirect: '/login' },
{ component: '@/pages/404' },
]
},
{ component: '@/pages/404' },
];
// wrappers/auth
import React, { FC } from "react";
import { Redirect } from "umi";
const Auth: FC<{}> = (props) => {
if (true) {
return <div>{props.children} </div>
} else {
return <Redirect to='/login'></Redirect>
}
}
export default Auth;
路由跳转
路由跳转方式分为：
- 编程式跳转 —— 使用history中的一些API来使用
- 声明式跳转 —— 通过引入umi的NavLink或者Link
编程式跳转：
通过history的一些api进行跳转，history可直接引入或者通过hook(useHistory)引入
const history = useHistory();
history.push(`/goods/${id}/comment`);
// 带参数跳转到指定路由
// history.push('/list?a=b');
// history.push({
// pathname: '/list',
// query: {
// a: 'b',
// },
// });
接收参数： 通过hook或者路由上下文来实现
//参数放在query中时使用
const location: any = useLocation<Location>();
const { query } = location;
//参数放在 ? 之后时使用
const params: any = useParams();
const { id } = params;
约定式路由
也叫文件路由不需要手动配置，文件系统就是路由，通过目录和文件及其命名分析出路由配置
看需求
反向代理
在umi进行开发时当我们发出请求，它是发给umi服务器的，希望umi服务器进行代理转发到目标服务器。代理相关配置可以加在config中，或者另外新建一个proxy.ts在引入config.js 常用proxy配置如下：
export default {
'/api': {
// 要代理的真实服务器地址
target: 'https://localhost:9001',
//配置了这个可以从http代理到https
https: true,
//以来origin的功能可能需要这个，比如cookie
changeOrigin: true,
pathRewrite: { '^/api': '' }, //路径替换
},
'/book': {
target: 'https://api.zhuishushenqi.com',
changeOrigin: true,
}
}
