关于Umi 基础

官方文档：https://umijs.org/zh-CN/docs/getting-started

创建一个文件夹 之后在终端运行 npx @umijs/create-umi-app 或者 yarn create @umijs/umi-app

之后再安装一个node包 cnpm i 或者 yarn
输入命令 npm start 就可以运行

先删除ts文件 之后创建一个config文件夹 创建一个config.js 来替代ts文件
ts的东西复制到config.js里面 之后就是配置路由
config.js里面的路由是在routes 所以先把他提出来 之后直接引用就好
把默认的pages的index.js和index.less删掉就好了

在config.js中 写入
// 代理
proxy: {
‘/api’: {
target: ‘https://blogs.zdldove.top’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
},

// 别名
alias: {
‘@@@’: path.resolve(__dirname, ‘…/src/components’),
},

关于二级路由以及layout的使用
先在src目录下面创建一个layout文件夹 里面写文件 文件
里主要写 {props.children}
之后在config.js中引入的routes.js路径中写
export default [
{ path: ‘/home’,
component: ‘@/Layouts/Blayout’,
routes:[
{ path: ‘/home/login’, component: ‘@/pages/login’, title: ‘登陆’},
{ path: ‘/home/home’, component: ‘@/pages/home’, title: ‘首页’},
]
},
]
/*
path：路径名
component：路径
title：显示的title
*/

wrappers: ['@/utils/athorized'],        //权限验证  这个在 routes.js 中写  例如：

export default [
{ path: ‘/home’,
component: ‘@/Layouts/Blayout’,
wrappers: [’@/utils/athorized’],//权限验证
routes:[
{ path: ‘/home/home’, component: ‘@/pages/home’, title: ‘首页’},
]
},
{ path: ‘/login’,
component: ‘@/pages/login’,
title: ‘登陆’
},
]

之后找到@/utils/athorized 文件

import { Redirect } from ‘umi’

export default props => {
if(!sessionStorage.getItem(‘red’)){
return
}
return <>{props.children}</>
}