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

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

1.login登录页面

< el-form >表单

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

<el-form 
label-position="top"  --【 对齐方式 （顶部对齐）  登录-换行-input的形式】
label-width="80px"  -- 【表单域标签的宽度。作为 Form 直接子元素的 form-item 会继承该值。支持 auto】
:model="formdata"  -- 【双向数据绑定，表单数据对象】
class="login-form" 
:rules="rules"  -- 【表单验证规则
ref="formdata" -- 【vue操作dom元素】
>
      <el-form-item 
      label="用户名"  -- 【label是form-item的属性】
      prop="username" -- 【设置为需校验的字段名】
      >
          <el-input
          v-model="formdata.username"
          placeholder="请输入一个美丽的用户名"
          prefix-icon="el-icon-s-custom"
          ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
       	 <el-input v-model="formdata.password" type="password"
       	 placeholder="请输入密码"
       	 prefix-icon="el-icon-s-goods" -- 【input标签内使用图标】
       	show-password --【可显示密码】
       	></el-input>
      </el-form-item>
</el-form>

2.主页home页面

2.1< el-container > 布局容器

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

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

< el-header>：顶栏容器。

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

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

< el-footer>：底栏容器。

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

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2.2 Layout 布局

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

<el-row>
  <el-col 
  :span="4" -- 【栅格占据的列数】
  > </el-col>
  <el-col :span="16"></el-col>
  <el-col :span="4"></el-col>
</el-row>

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

<el-row 
justify="center" -- 【flex 布局下的水平排列方式】
type="flex" -- 【布局模式，可选 flex，现代浏览器下有效】
>
  <el-button type="primary" class="login-btn" @click="handleLogin('formdata')" >登录</el-button>
  <el-button @click="resetForm('formdata')" type="info" class="login-btn" >重置</el-button>
</el-row>

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

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

<el-aside class="aside" width="200px">
        <el-col :span="24">
          <el-menu
            default-active="2" -- 【当前激活菜单的 index】
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="teal"
            text-color="#fff"
            active-text-color="#ffff33"
            :unique-opened= true -- 【是否只保持一个子菜单的展开】
            :router= true -- 【是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转】
          >
           <el-submenu  -- 【启用二级菜单】
           :index="item1.order.toString()"  -- 【渲染一级菜单，index1~5】
           v-for="(item1,i) in menus" 
           :key="item1.id">
              <template slot="title"> -- 【↖一级菜单】
                <i :class="iconlist[i]"></i>
                <span>{
  {item1.authName}}</span>
              </template>
              <el-menu-item  -- 【二级菜单】
              :index="item2.path" 
              v-for="item2 in item1.ch