1 布局+樣式 (V)
- 用戶列表布局
頂部
左側(cè)菜單欄：二級菜單
右側(cè)內(nèi)容主體
- 樣式
背景色
background-color: #373d41;
撐滿全屏
height: 100%;
小手圖標(biāo)
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 先按需導(dǎo)入钓觉，注冊 -> 再使用
Button,（屬性宜岛，值類型枕稀，可能填寫的值+意義）
type str primary，danger椭更，warning
icon str el-icon-edit爬舰，el-icon-delete
size str mini
Form,
:model {} 數(shù)據(jù)對象
:rules {} 校驗(yàn)規(guī)則
ref 引用
label-width 表項(xiàng)的標(biāo)題寬度
FormItem
label str 表項(xiàng)標(biāo)題
prop str 對應(yīng)的校驗(yàn)規(guī)則
Input
type str
v-model 數(shù)據(jù)雙向綁定
Message 提示消息：全局掛載+使用
Container 布局容器
Header 頭部 ：標(biāo)題 + 圖標(biāo)
Aside 側(cè)邊
:width 寬度
Main 主體
Menu 菜單：折疊展開+小手+折疊動(dòng)畫+路由
unique-opened 只展開一個(gè)子菜單
:collapse bool 折疊展開
:collapse-transition bool 折疊動(dòng)畫
router 開啟路由
:default-active str 選中的index
Submenu 子菜單 : 只展開自己（index）+ 選中高亮
:index str 索引
v-for 遍歷
:key 鍵 可以提高v-for的效率
MenuItem 菜單項(xiàng) : 圖標(biāo) + 文本
:index str 路由鏈接
v-for [] 列表
:key 鍵
@click () 單擊事件
Breadcrumb 面包屑：導(dǎo)航
BreadcrumbItem 面包屑項(xiàng)
Card 卡片化視圖 ：柵格模式
Row 行：
:gutter int 行分多少格
Col 列
:span int 一列占多少格
Table 表格：
:data [] 數(shù)據(jù)源
border 邊框
stripe 隔行換色
TableColumn 表格列
type str
label str 列標(biāo)題
prop str 屬性名稱：展示數(shù)據(jù)源中對應(yīng)屬性的值
子標(biāo)簽
template
slot-scope str scope 獲取數(shù)據(jù)
Switch 選擇開關(guān)：false，true
v-model bool 雙向綁定狀態(tài)
Tooltip 文字提示
effect str dark 樣式
content str 提示內(nèi)容
placement str top 提示位置
:enterable bool 可否進(jìn)入文字區(qū)域允蚣，false表示不可以
Pagination 分頁
@size-change () 頁大小改變觸發(fā)函數(shù)
@current-change () 當(dāng)前頁數(shù)改變觸發(fā)函數(shù)
:current-page int 當(dāng)前頁數(shù)綁定
:page-sizes [int] 可選頁大小
:page-size int 頁大小
layout str total, sizes, prev, pager, next, jumper 需要展示的分頁組件
:total int 總數(shù)據(jù)量綁定
Dialog 對話框
title str 對話框標(biāo)題
:visible.sync bool 是否顯示對話框
width 寬度
@close () 對話框關(guān)閉觸發(fā)函數(shù)
子標(biāo)簽
span
solt str footer 對話框底部區(qū)域
class 樣式
- 插槽
<template slot-scope="scope"> //scope.row 包含了一行的數(shù)據(jù)
</template>
3 數(shù)據(jù)，方法 （M+VM）
- 生命周期函數(shù)
created
獲取數(shù)據(jù)列表
存取數(shù)據(jù)
- data+method
data
自定義校驗(yàn)規(guī)則
return
數(shù)據(jù)對象
數(shù)據(jù)列表
校驗(yàn)規(guī)則對象
method
async await 異步請求方法 ：請求接口
事件觸發(fā)方法
生命周期方法
created
- axios 發(fā)起請求+路由守衛(wèi)
請求頭
提供token
通過攔截器添加token
設(shè)置請求頭
發(fā)起請求獲取數(shù)據(jù)
- 路由
子路由 children
路由規(guī)則
routes [
{path,redirect,component,children},
{}
]
路由重定向
this.$router.push('/login')
路由占位符
<router-view></router-view>
- sessionStorage：用于存取值
