Vue项目实战04

1 布局+样式 (V)

• 用户列表布局

顶部
左侧菜单栏：二级菜单
右侧内容主体

• 样式

背景色
  background-color: #373d41;
撑满全屏
  height: 100%;
小手图标
  cursor: pointer;
字体大小
  font-size: 10px;
行高
  line-height: 24px;
文本居中
  text-align: center;
布局
  display: flex;
  justify-content: space-between;
  align-items: center;

2 Element-UI (V)

• 1 使用到的element-ui组件
• 2 先按需导入，注册 -> 再使用

  Button,（属性，值类型，可能填写的值+意义）
    type str primary，danger，warning
    icon str el-icon-edit，el-icon-delete
    size str mini
  Form,
    :model {} 数据对象
    :rules {} 校验规则
    ref 引用
    label-width 表项的标题宽度
  FormItem
    label str 表项标题
    prop str 对应的校验规则
  Input
    type str
    v-model 数据双向绑定
  Message 提示消息：全局挂载+使用
  Container 布局容器
  Header 头部 ：标题 + 图标
  Aside 侧边
    :width 宽度
  Main 主体
  Menu 菜单：折叠展开+小手+折叠动画+路由
    unique-opened 只展开一个子菜单
    :collapse bool 折叠展开
    :collapse-transition bool 折叠动画
    router 开启路由
    :default-active str 选中的index
  Submenu 子菜单 : 只展开自己（index）+ 选中高亮
    :index str 索引
    v-for 遍历
    :key 键 可以提高v-for的效率
  MenuItem 菜单项 : 图标 + 文本
    :index str 路由链接
    v-for [] 列表
    :key 键
    @click () 单击事件
  Breadcrumb 面包屑：导航
  BreadcrumbItem 面包屑项
  Card 卡片化视图 ：栅格模式
  Row 行：
    :gutter int 行分多少格
  Col 列
    :span int 一列占多少格
  Table 表格：
    :data [] 数据源
    border 边框
    stripe 隔行换色
  TableColumn 表格列
    type str
    label str 列标题
    prop str 属性名称：展示数据源中对应属性的值
    子标签
      template
        slot-scope str scope 获取数据
  Switch 选择开关：false，true
    v-model bool 双向绑定状态
  Tooltip 文字提示
    effect str dark 样式
    content str 提示内容
    placement str top 提示位置
    :enterable bool 可否进入文字区域，false表示不可以
  Pagination 分页
    @size-change ()  页大小改变触发函数
    @current-change () 当前页数改变触发函数
    :current-page int 当前页数绑定
    :page-sizes [int] 可选页大小
    :page-size int 页大小
    layout str total, sizes, prev, pager, next, jumper 需要展示的分页组件
    :total int 总数据量绑定
  Dialog 对话框
    title str 对话框标题
    :visible.sync bool 是否显示对话框 
    width 宽度
    @close ()  对话框关闭触发函数
    子标签
      span
        solt str footer 对话框底部区域 
        class 样式

• 插槽

<template slot-scope="scope"> //scope.row 包含了一行的数据
</template>

3 数据，方法 （M+VM）

• 生命周期函数

created
  获取数据列表
  存取数据

• data+method

data
  自定义校验规则
  return
    数据对象
    数据列表
    校验规则对象

method
  async await 异步请求方法 ：请求接口
  事件触发方法

生命周期方法
  created

• axios 发起请求+路由守卫

请求头 
    提供token
通过拦截器添加token
    设置请求头 
发起请求获取数据

• 路由

子路由 children
路由规则
  routes [
  {path,redirect,component,children},
  {}
  ] 
路由重定向
  this.$router.push('/login')  
路由占位符
  <router-view></router-view>

• sessionStorage：用于存取值