如何引入iview，如何配置它的loader。如何全局引入和按需引入iview
2：使用layout布局組件，
3：使用iview的柵格組件。實現響應式的布局。根據網格的寬度來實現不同的布局。
這是一個對應寫好的文檔。github上文檔在根目錄中：https://github.com/lison16/vue-cource/blob/master/doc/vue-cli3%E4%B8%AD%E4%BD%BF%E7%94%A8iview.md
在vue cli 3.0中呢，iview的配置有一些改變，主要是在iviewLoader這的配置，因為在vuecli 3.0中是沒有webpack的配置文件的。
首先是在main.js中全局引入。iview作為一個插件需要用Vue的use方法來注冊安裝。
第二個方法是按需引入：iview中有很多的組件，項目中你可能用不到。如果全局引入，編譯后的提及會比較大。
用哪個你局把哪個全局引入。這樣你打包后的文件就會小很多。
如果沒有loader的話，這里按需引入是需要加i-的前綴的
配置iviewLoader會在編譯的時候把switch、circle等替換成代碼i-前綴的組件名。
添加了iview-loader就可以不先i-的前綴了。
layout的布局是本視頻作者封裝的。
http://v3.iviewui.com/components/layout
下面來實際的試用一下layout
首先安裝iview。iview的3.1.0版本是可以做為插件來安裝的。
啟動vue ui
選中進行安裝
原來的安裝方式：npm install iview
視頻中使用的iview的版本是：3.2.1
由於iview的4.0版本后已經改名了，所以這里我們可以繼續安裝iview最后的版本是3.5.4
npm install iview --save
這次我安裝的時間是2020年12月23日15:46:17
安裝完成后，重啟我們的項目
main.js內引入iview。這樣就可以在任何一個vue文件內使用我們的iview組件了。
在views文件夾下，創建一個layout頁面
直接讓他在home頁面顯示
讓它的高度和頁面的高度是一樣的在app.vue里面
要想默認打開地址：http://localhost:8080/#/ 能顯示Layout頁面，路由守衛的代碼要注釋掉，之前的課程我們加上了驗證token是否登陸的邏輯。
App.vue 注釋掉
隨便寫個layout
使用layout
實現左右，上下的布局。
最外層加個屬性，height是100%
最外層div加個高度
這倆都是100%，給他倆合起來。注意他們之間用逗號分隔開了
這樣左邊是sider，右邊呢，是一個上下布局（上面是header 下面是content）。
設置header的背景色為白色，加個陰影
sider的屬性，是否可收起
http://v3.iviewui.com/components/layout#API
設置上就會顯示是否可收起的按鈕
但是一定給他綁定一個v-model的值來控制它的伸縮狀態。默認我們是false 不收縮。
點擊就收縮
也可以自己定義
被隱藏了
在header里面放一個icon來訪收縮的按鈕
header的padding有點大，我們給它設置一個
23合適就改為23
點擊圖標來控制菜單的收縮。
點擊icon圖標的時候去修改。collapsed的值為true或者是false
給icon綁定click事件，大家注意icon是沒有辦法綁定click的事件的。
所以我們是綁定icon最外層的html標簽綁定原生的事件。所以要加native的修飾符
一個取反的操作。
給圖標加狀態，如果是收縮的，那么就旋轉90度。綁定一個class屬性，默認它是一個數組
給上面也綁定一個過渡效果
收縮的狀態
{
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px'
}
小於576px的時候
當把瀏覽器縮小到768像素的時候，左側菜單自動收縮起來了。注意768的話，breakpoint要設置成md
把sider放在右邊，箭頭就會在右邊顯示了。
讓箭頭在右邊
這個屬性，旋轉箭頭的方向
把sider再移動到左邊
下面看柵格
柵格
把整行Row分為24列
gutter列之間的間距
col常用的就是span。跨幾列
左側跨幾列
在Content里面，我們先用Card設置一個內容區域
加個陰影，同時給他一個css類名
給他一個最小高度，當它沒有內容的時候有最小高度。
希望content有個10像素的內邊距
這樣就有了10像素的內邊距了
那么就是屏幕的高度減去 頂部64 再減去 上下的內邊距10 加起來就是84px
100vh: 相對於視窗的高度, 視窗被均分為100單位的vh; css3新發現height:100vh;
表示整個瀏覽器窗口高度減去84px的高度就是中間內容要展示的區域
內容區域剛剛好 上下留出了10像素，正好就是頁面的高度。
然后給它一個router-view標簽。我們把layout這個組件當做是父組件。
給layout使用嵌套路由
這樣當我們輸入home的時候。home頁就會現在是Content區域了。
http://localhost:8080/#/home
下面在Home.vue內使用柵格布局。在vs-vode里面，如果你寫這個Col標簽會有問題。
Col標簽沒法自動補全，並且這里會報一個小錯誤。
這里可以使用i-col
里面有個i-vu-col
設置i-vu-col樣式
再來一行，間距gutter是10，然后分成兩列就是 24/2=12
<Row :gutter="10"> <i-col span="12"></i-col> <i-col span="12"></i-col> </Row>
它是自動增加了padding-left和right的間距。這樣 間距就是10
background-clip屬性指定背景繪制區域：背景繪制在內容方框內（剪切成內容方框）。
間距也是粉色，現在只想在content顯示背景色
三列
offset=1
想讓第一個柵格往右偏一列。同時右邊的柵格，都會往右偏移一個柵格的距離。
如果想讓它右移，但是又不影響其他格push=1
第二列 往右偏移1列。
蓋住了后面的列
做響應式布局 就是下面幾個屬性了
blue里面的列北京是藍色
md的寬度的時候每一個占8列。就是頁面均等分為3列
前面需要加冒號
屏幕區域大於992像素的時候，顯示2列
小於992的時候，顯示2列
小於768的時候。每行顯示1列
這樣就達到了根據屏幕不同的寬度顯示不同的布局
本節代碼
