### layouts 目录中，抽离了使用过程中一些常用的布局
* AdminLayout/**管理后台布局**，包含了头部导航，侧边导航、内容区和页脚，用于系统的整体布局
* PageLayout/**页面布局**，包含了页头（面包屑）和内容区
* CommonLayout/**通用布局**，仅包含内容区和页脚的简单布局，项目中用于注册、登录或展示页面
### 除了基本布局外，通常有很多页面的结构是相似的。因此，我们把这部分结构抽离为视图组件
* TabsView/**多页签视图**，包含了 AdminLayout 布局、多页签头和路由视图内容区
* PageView/**页面视图**，包含了 PageLayout 布局和路由视图内容区
* BlankView/**空白视图**，仅包含一个路由视图内容区
## 如何使用
把视图组件和路由配置结合一起使用，我们把配置信息抽离在`src/router/config.js`中
```
export default {
name: "基础数据",
path: "basic-data",
component: PageView,
meta: {
title: "基础数据",
},
children: [
{
path: "vendor",
name: "供应商管理",
meta: { title: "供应商管理" },
component: () => import("@/pages/basic/vendor/index"),
},
]
}
```
## modules
不同的模块在modules下建立不同的js文件，引入到`src/router/config.js`中
```
import system from"@/router/modules/system.js";
```
```
const options = {
routes: [
...system
]
}
```
