vue项目中所使用的element-UI / echarts

高清版思维导图见后台管理项目地址

1.login登录页面

< el-form >表单

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

2.主页home页面

2.1< el-container > 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

< el-container>：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

< el-header>：顶栏容器。

< el-aside>：侧边栏容器。

< el-main>：主要区域容器。

< el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，< el-container> 的子元素只能是后四者，后四者的父元素也只能是 < el-container>。

  Header
  
    Aside
    Main
  

2.2 Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。
用于< el-header>

因此登录页面的【登录】【重置】按钮应使用layout布局

  登录
  重置

2.3 < el-menu>导航菜单-侧栏

1. 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
2. 通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。-- 在项目中未用到，因为菜单是动态生成而非一一列举的，