umi max学习 2022-10-25

Umi Max学习

在新做后台管理项目时，发现umi3已经升级，umi4已经发布了，发现其中umi的使用已经有了些变化，现将变化整理

创建项目

pnpm dlx create-umi@latest

=>Ant Design Pro

=>pnpm

=>taobao

 

 

修改界面Layout

 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
  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

 

 

 

 未完待续

posted @ 2022-10-31 10:37  WesChan  阅读(2221)  评论(0)  编辑  收藏  举报