ant.design pro中后台平台学习之路(1)
公司需要创建重构一个后台管理平台,这么好的学习机会必须给Ta安排一波,废话少说,走起!
一. 项目创建
第一步,首先新建一个文件夹,使用管理员身份打开cmd窗口,执行ant.design pro脚手架工具安装命令,
以下均已yarn为例,没有yarn工具可使用npm代替
yarn create umi
提示 ?Select the boilerplate type
(选择样板类型),我们选择: ant-design-pro
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
提示? Which language do you want to use?
(你想用哪种语言), 我们选择TypeScript
❯ TypeScript
JavaScript
Ant Design Pro 脚手架将会自动安装。
项目生成的目录结构如下
├── config # umi 配置,包含路由,构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
二. 安装依赖文件,启动项目
打开文件夹,继续执行下面的步骤,然后安装项目依赖文件(需要已安装Node环境)
yarn install
安装时间与网速有关,大概需要十几分钟时间,安装完成后,执行start运行工程
yarn start
项目启动后,会自动运行项目
三. 增加两个页面,Home和 Roc
首先打开src下的pages文件夹,新建文件Homes.tsx ,
Homes.tsx
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
export default () => {
return (
<PageHeaderWrapper>
{
<div>大鹏博客首页</div>
}
</PageHeaderWrapper>
);
};
然后在pages文件夹下,新建文件夹 roc,在roc文件夹中再新建 List 文件夹 和 Form 文件夹,
分别在List和Form中新建 index.tsx。
Form ——> index.tsx
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
export default () => {
return (
<PageHeaderWrapper>
{
<div>Form页面</div>
}
</PageHeaderWrapper>
);
};
List ——> index.tsx
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
export default () => {
return (
<PageHeaderWrapper>
{
<div>List页面</div>
}
</PageHeaderWrapper>
);
};
四. 修改菜单列表,固定Header和侧边菜单,下滑时隐藏Header
1.修改菜单列表
打开根目录下,config ——>config.ts ,找到100行(脚手架版本不同,位置可能不一致)
{
path: '/',
component: '../layouts/SecurityLayout',
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'],
routes: [
{
path: '/',
redirect: '/welcome',
},
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
component: './404',
},
],
},
{
component: './404',
},
],
},
修改为
{
path: '/',
component: '../layouts/SecurityLayout',
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'],
routes: [
{
path: '/',
redirect: '/homes',
},
{
path: '/homes',
name: 'homes',
icon: 'smile',
component: './homes',
},
{
path: '/roc',
name: 'roc',
icon: 'smile',
routes: [
{
name: 'list',
icon: 'smile',
path: '/roc/list',
component: './roc/List',
},
{
name: 'form',
icon: 'eye',
path: '/roc/form',
component: './roc/Form',
},
]
},
{
component: './404',
},
],
},
{
component: './404',
},
],
},
- 固定Header和侧边菜单,下滑时隐藏Header
打开config——> defaultSettings.ts 文件,找到45行,配置信息导出
export default {
navTheme: 'dark',
primaryColor: '#1890FF',
layout: 'sidemenu',
contentWidth: 'Fluid',
fixedHeader: false,
autoHideHeader: false,
fixSiderbar: false,
colorWeak: false,
menu: {
locale: true,
},
title: 'Ant Design Pro',
pwa: false,
iconfontUrl: '',
} as DefaultSettings;
修改 fixedHeader 、autoHideHeader 、fixSiderbar 为 True, 结果如下:
export default {
navTheme: 'dark',
primaryColor: '#1890FF',
layout: 'sidemenu',
contentWidth: 'Fluid',
fixedHeader: true,
autoHideHeader: true,
fixSiderbar: true,
colorWeak: false,
menu: {
locale: true,
},
title: '大鹏博客',
pwa: false,
iconfontUrl: '',
} as DefaultSettings;
五: 处理注册模板报错信息
最后处理一下控制台中的语言报错信息,这个报错信息是注册模板报错
[React Intl] Missing message: "menu.roc" for locale: "zh-CN", using default message as fallback.
[React Intl] Missing message: "menu.roc.form" for locale: "zh-CN", using default message as fallback.
打开src —> locales —> zh-CN —> menu.ts 文件,在下面增加配置即可。
export default {
'menu.homes': '大鹏博客',
'menu.roc': '大鹏博客',
'menu.roc.list': '大鹏博客列表页',
'menu.roc.form': '大鹏博客表单页',
}