Umi Max学习
在新做后台管理项目时,发现umi3已经升级,umi4已经发布了,发现其中umi的使用已经有了些变化,现将变化整理
创建项目
pnpm dlx create-umi@latest =>Ant Design Pro =>pnpm =>taobao
修改界面Layout
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import { defineConfig } from '@umijs/max'; 2 3 export default defineConfig({ 4 antd: {}, 5 access: {}, 6 model: {}, 7 initialState: {}, 8 request: {}, 9 layout: { 10 title: 'CF MES', 11 }, 12 // routes: [ 13 // { 14 // path: '/', 15 // redirect: '/home', 16 // }, 17 // { 18 // name: '首页', 19 // path: '/home', 20 // component: './Home', 21 // }, 22 // { 23 // name: '权限演示', 24 // path: '/access', 25 // component: './Access', 26 // }, 27 // { 28 // name: ' CRUD 示例', 29 // path: '/table', 30 // component: './Table', 31 // }, 32 // ], 33 npmClient: 'pnpm', 34 });.umirc.ts
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 // 运行时配置 2 3 // 全局初始化数据配置,用于 Layout 用户信息和权限初始化 4 // 更多信息见文档:https://next.umijs.org/docs/api/runtime-config#getinitialstate 5 6 import { Button } from 'antd'; 7 import { 8 CaretDownFilled, 9 DoubleRightOutlined, 10 GithubFilled, 11 InfoCircleFilled, 12 PlusCircleFilled, 13 QuestionCircleFilled, 14 SearchOutlined, 15 SmileFilled, 16 } from '@ant-design/icons'; 17 18 export async function getInitialState(): Promise<{ name: string }> { 19 return { name: '@umijs/max' }; 20 } 21 22 export const layout = () => { 23 return { 24 /** 25 * 应用的Logo 26 */ 27 logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg', 28 /** 29 * 菜单 30 * locale:是否多语言 31 * collapsedShowGroupTitle: 32 */ 33 menu: { 34 locale: false, 35 collapsedShowGroupTitle: true, 36 navTheme: 'dark', 37 }, 38 /** 39 * layout:为mix才是普通的样式,即有头部,有左侧菜单等, 40 * 取消了该配置,则没有头部,只有左侧菜单 41 */ 42 layout: 'mix', 43 /** 44 * 自动切割菜单,mix的专属能力 45 * 当为true时,可以把第一级菜单旋转到顶栏中 46 * 取消配置时,菜单则只显示在左侧菜单栏中 47 * 注意:为了体验良好,最好给每个一级菜单都设置一个重定向,这样可以防止切换到白屏页面 48 */ 49 splitMenus: true, 50 /** 51 * 是否固定导航 52 */ 53 fixSiderbar: true, 54 /** 55 * siderMenuType:会将菜单进行分组,并且显示对应的分隔线,以平面的形式显示 56 * 取消则会按树状进行显示菜单 57 */ 58 // siderMenuType: "group", 59 /** 60 * 当非mix模式时,会出现在菜单的左下角,如果是min模式,则不起效果 61 */ 62 // avatarProps: { 63 // src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg', 64 // size: 'small', 65 // title: '七妮妮', 66 // }, 67 /** 68 * 退出登陆事件,当有退出事件时,头像图标才会出现【退出登陆】按钮 69 */ 70 logout: () => { console.log('退出登陆系统') }, // do something 71 /** 72 * 背景图片,让系统更美观 73 * 不设置也不影响系统显示,只是没有那么美观而已 74 */ 75 bgLayoutImgList: [ 76 { 77 src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png', 78 left: 85, 79 bottom: 100, 80 height: '303px', 81 }, 82 { 83 src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png', 84 bottom: -68, 85 right: -45, 86 height: '303px', 87 }, 88 { 89 src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png', 90 bottom: 0, 91 left: 0, 92 width: '331px', 93 }, 94 ], 95 /** 96 * 此功能可以实现动态路由,用来渲染访问路由 97 * 如果该功能启用了,则会重写route中的数据 98 * @returns 99 */ 100 // menuDataRender: () => [ 101 // { 102 // path: '/', 103 // name: 'Home', 104 // }, 105 // { 106 // path: '/about', 107 // name: 'About', 108 // children: [ 109 // { path: '/about/company', name: 'Company' }, 110 // { path: '/about/investors', name: 'Investors' }, 111 // ], 112 // }, 113 // ], 114 /** 115 * 菜单左侧出现应用的Icon 116 * 用于进行多站点之前的导航 117 */ 118 appList: [ 119 { 120 icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', 121 title: 'Ant Design', 122 desc: '杭州市较知名的 UI 设计语言', 123 url: 'https://ant.design', 124 }, 125 { 126 icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', 127 title: 'AntV', 128 desc: '蚂蚁集团全新一代数据可视化解决方案', 129 url: 'https://antv.vision/', 130 target: '_blank', 131 }, 132 ], 133 route: { 134 path: '/', 135 redirect: '/home', 136 default: '/', 137 routes: [ 138 { 139 path: '/home', 140 name: '首页', 141 // icon: <SmileFilled />, 142 component: './Home', 143 }, 144 { 145 path: '/access', 146 name: '管理页', 147 // icon: <CrownFilled />, 148 access: 'canAdmin', 149 component: './Access', 150 routes: [ 151 { 152 path: '/access/sub-page1', 153 name: '一级页面', 154 // icon: <CrownFilled />, 155 component: './access/sub-page1', 156 }, 157 { 158 path: '/access/sub-page2', 159 name: '二级页面', 160 // icon: <CrownFilled />, 161 component: './access/sub-page2', 162 }, 163 { 164 path: '/access/sub-page3', 165 name: '三级页面', 166 // icon: <CrownFilled />, 167 component: './access/sub-page3', 168 }, 169 ], 170 }, 171 { 172 name: '列表页', 173 // icon: <TabletFilled />, 174 path: '/table', 175 component: './Table', 176 routes: [ 177 { 178 path: '/list/sub-page', 179 name: '列表页面', 180 // icon: <CrownFilled />, 181 routes: [ 182 { 183 path: 'sub-sub-page1', 184 name: '一一级列表页面', 185 // icon: <CrownFilled />, 186 component: './Welcome', 187 }, 188 { 189 path: 'sub-sub-page2', 190 name: '一二级列表页面', 191 // icon: <CrownFilled />, 192 component: './Welcome', 193 }, 194 { 195 path: 'sub-sub-page3', 196 name: '一三级列表页面', 197 // icon: <CrownFilled />, 198 component: './Welcome', 199 }, 200 ], 201 }, 202 { 203 path: '/list/sub-page2', 204 name: '二级列表页面', 205 // icon: <CrownFilled />, 206 component: './Welcome', 207 }, 208 { 209 path: '/list/sub-page3', 210 name: '三级列表页面', 211 // icon: <CrownFilled />, 212 component: './Welcome', 213 }, 214 ], 215 }, 216 { 217 path: 'https://ant.design', 218 name: 'Ant Design 官网外链', 219 // icon: <ChromeFilled />, 220 }, 221 ], 222 }, 223 /** 224 * 菜单的样式设定,如果不设定则是灰色的菜单 225 */ 226 // token: { 227 // colorBgAppListIconHover: 'rgba(0,0,0,0.06)', 228 // colorTextAppListIconHover: 'rgba(255,255,255,0.95)', 229 // colorTextAppListIcon: 'rgba(255,255,255,0.85)', 230 // sider: { 231 // colorBgCollapsedButton: '#fff', 232 // colorTextCollapsedButtonHover: 'rgba(0,0,0,0.65)', 233 // colorTextCollapsedButton: 'rgba(0,0,0,0.45)', 234 // colorMenuBackground: '#004FD9', 235 // colorBgMenuItemCollapsedHover: 'rgba(0,0,0,0.06)', 236 // colorBgMenuItemCollapsedSelected: 'rgba(0,0,0,0.15)', 237 // colorMenuItemDivider: 'rgba(255,255,255,0.15)', 238 // colorBgMenuItemHover: 'rgba(0,0,0,0.06)', 239 // colorBgMenuItemSelected: 'rgba(0,0,0,0.15)', 240 // colorTextMenuSelected: '#fff', 241 // colorTextMenu: 'rgba(255,255,255,0.75)', 242 // colorTextMenuSecondary: 'rgba(255,255,255,0.65)', 243 // colorTextMenuTitle: 'rgba(255,255,255,0.95)', 244 // colorTextMenuActive: 'rgba(255,255,255,0.95)', 245 // colorTextSubMenuSelected: '#fff', 246 // }, 247 // }, 248 }; 249 };app.ts
本地运行项目
pnpm dev
浏览器打开8000端口,即可查看项目运行
参考链接:https://blog.csdn.net/w544924116/article/details/120211891
未完待续
标签:25,sub,name,10,max,rgba,path,icon,255 From: https://www.cnblogs.com/weschen/p/16843494.html