持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
上一篇文章中我们配置了左侧菜单栏的路由跳转事件以及vue-router的配置，接下来我们将实现主题区域，mian部分。
- 首先我们主体部分的样式如下图所示：
- 这里主要用到了element-plus中的el-card组件以及echart图表，首先我们先使用el-card创建四个卡片组件，用来放图标和具体的订单数量，然后通过display:flex;以及justify-content: space-between;来使这四个盒子在一行内均匀排布，里面的数据是用过mock来模拟的。
- 接下来介绍mock的使用，首先我们进入到他的官网www.fastmock.site/#/login ， 然后注册一个账号就可以点击加号创建接口了
这里我们首页的顶部四个盒子的数据就如下所示：
- 然后我们需要通过axios来发送请求来获取数据，首先我们打开终端，npm i axios --s,
- 安装完成之后我们一样的可以在package.js文件中看到axios的版本号，我的版本如下所示：
然后我们需要封装axios，方便我们发送请求，获取接口数据，首先我们需要在src目录下面创建一个api文件夹，里面创建一个request.js文件，然后通过import来引入axios,然后将我们的mock的基础路径赋值给baseURL,请求超时事件设置为5000,具体的封装代码如下所示：
