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：用于存取值
