ant design学习笔记（一）

最新推荐文章于 2024-07-18 08:00:25 发布

小弱鸡啊

最新推荐文章于 2024-07-18 08:00:25 发布

阅读量977

点赞数 1

分类专栏： ant Design Pro 文章标签： ant Design Pro

本文链接：https://blog.csdn.net/weixin_43590784/article/details/86561186

版权

本文介绍了Ant Design Pro项目的目录结构，包括routes、services、models和components的作用。讲解了如何添加新路由、配置菜单、创建页面、引入组件、实现数据交互，并提到了mock数据和项目打包的过程。

摘要由CSDN通过智能技术生成

ant design 快速入门

1、目录结构浅谈
ant 中一个完整的目录结构主要包括
src：存放拥有与业务功能的代码
其中，最常用的应该是routes、services、models以及components.
a、routes：每个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。
b、services：用于与后台交互、发送请求等。
c、models：用于组建的数据存储，接受请求返回的数据等。
d、compoments：组件文件夹。每个页面可能是由一些组件组成的，对于一些相对通用的的组件，建议先放到components文件夹中，并在routes文件夹中的文件引入来使用。

2、配置新的路由和菜单
在Ant Design Pro中，前端路由是通过react-router4.0进行路由管理的。
下面，我们将会讲解如下添加一个新的路由，并在前端页面中增加一个菜单来对应该路由。
在Ant Design Pro中，路由的配置文件统一由src/common/router.js文件进行管理。
示例内容如下

const routerConfig = {
    '/': {
      component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
    },
    '/dashboard/monitor': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
    },
    '/dashboard/workplace': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
    }
}
其中，包含了三个路由：/，/dashboard/monitor，/dashboard/workplace。

同时，指定了这三个路由分别对应的页面文件为layouts/BasicLayout.js，routes/Dashboard/NgMonitor.js以及Dashboard/NgWorkSpace.js文件。

下面，我们可以在侧边栏中填写一项来对应到我们添加的路由中：