4-結構體搭建

這裏主要是切換路由的一個結構，不涉及菜單等結構，底部tab，設置切換的路由

路徑錦集

獲取某個組件的高度

ES6
變量：let
屬性=值：簡寫成屬性

1 Tab切換頁面欄（頁面切換欄）

1.1 組件目錄
components：非路由組件（TabBar）
pages：路由組件（index/cat/cart/user）

1.2 切換條結構
div.tabbar>ul>( li>(img+p) ) * 4
1.3 切換條佈局
ul:{flex}
li:{flex:1}

注意：line-height行高是指每一行文字的高度，不適用多行居中
只有這隻了字體的大小，才能等比縮放，否則就是默認的
1.4 添加點擊事件，修改路由地址

1.5 使用路由對象
router/index.js
1）導入路由
2）導入相關組件
3）聲明在Vue中使用路由
4）對外暴露一個路由對象

1.6 使用組件TabBar
App.vue
1）導入組件
2）註冊組件
3）設置組件出口

1.7 使用路由對象
main.js

1. 導入路由對象
   2）聲明路由對象

   
   

2 實現頁面不佔用切換工具條

App.vue（主頁面的出口）
核心問題：切換條已經在頁面上加載之後，才能獲取它的高度和頁面的高度
解決方法：生命週期函數