Ant Design Pro入门

tearsroad 8月 02, 2023 43 0

一：了解Ant Design Pro

二：快速入门

一：了解Ant Design Pro

Ant Design Pro
是基于
Ant Design
的一个开箱即用的，企业级中后台前端
/
设计解决方案。

效果：

源码地址：https://github.com/ant-design/ant-design-pro

特性：

二：快速入门

部署安装

下载地址：
https://github.com/ant-design/ant-design-pro

我们使用资料中提供的，已经下载好的文件：
ant-design-pro-master.zip

第一步：将
ant-design-pro-master.zip
解压到任意目录，我的目录是
F:\code

Ant Design Pro提供的目录如下：

Ant Design Pro入门插图4

第二步，导入项目到Idea中

Ant Design Pro入门插图6

Ant Design Pro入门插图7

第三步：进行初始化以及启动

tyarn install #安装相关依赖

tyarn start #启动服务

测试：

可以看到，系统已经启动完成。

菜单和路由

默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。

在
pro
中，菜单和路由，在
router.confifig.js
配置文件中进行管理：

打开router.confifig.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/

/user的布局：

接下来，我们先重点关注，/路由

routes: [
// dashboard
{ path: '/', redirect: '/dashboard/analysis' },
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
routes: [
{
path: '/dashboard/analysis', //请求路径
name: 'analysis',
component: './Dashboard/Analysis', //组件位置
},
{
path: '/dashboard/monitor',
name: 'monitor',
component: './Dashboard/Monitor',
},
{
path: '/dashboard/workplace',
name: 'workplace',
component: './Dashboard/Workplace',
},
],
},

所以，可以得出结论，菜单是有路由的配置生成的。

接下来进行实验，新增一个路由：

// new
{
path: '/new',
name: 'new',
icon: 'user',
routes: [
{
path: '/new/analysis',
name: 'analysis',
component: './Dashboard/Analysis',
},
{
path: '/new/monitor',
name: 'monitor',
component: './Dashboard/Monitor',
},
{
path: '/new/workplace',
name: 'workplace',
component: './Dashboard/Workplace',
},
],
},

测试：

可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置呢？

其实，文字是在国际化文件中进行配置的：

Ant Design Pro入门插图14

新增配置如下：

‘menu.new’: ‘New Dashboard’,

‘menu.new.analysis’: ‘New 分析页‘,

‘menu.new.monitor’: ‘New 监控页‘,

‘menu.new.workplace’: ‘New 工作台‘,

进行测试：

发现，已经正常显示了。

新增页面

上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？

所有的页面依然是保存的
src/pages
中，在
pages
目录下，以功能为单元创建目录，如：

创建文件 NewAnalysis.js：

import React from 'react';

class NewAnalysis extends React.Component {

render() {
return (
<div>NewAnalysis</div>
);
}
}

export default NewAnalysis;

修改路由中的路径：