https://github.com/iview/iview
下載iview的代碼
Layout布局大概的樣子
Iview的源代碼。Layout
組件比較簡單，，里面一個slot
Sider是最復雜的組件
這里用了v-model的語法糖是，是vue里面的
上面的v-model實際就相當於下面的這段，通過事件改變了value的值
了解了以上幾個組件的大概的源碼 ，下面看一下 常見的幾種布局：
實戰-后台搭建
17分鍾開始
創建一個空的項目，只安裝vue-router和iview這兩個插件
項目名稱：iview-layout
重新安裝iview的插件
點擊卸載，重新安裝
重新安裝
出現了plugins文件夾，里面包含iview.js才表示安裝成功了iview
頁面效果實現
要實現的頁面的效果：
先把上面四個菜單的文件創建上
在views文件夾內創建四個文件。
然后在router里面把這幾個路由添加進去
注意把home注釋掉。要不然引用了 但是沒有用 就會報錯。
這里就一個router-view
一種實現思路把主題內容放到router-view內。頂部header和左側slider都在外部 router-view的頂部
另外一種：
在components自定義組件的形式：
中間用slot。
缺點：每個頁面內都寫一下自定義組件。
本次我們來使用的是第二種方案：在components里面自定義組件，然后在每個頁面里面去把它引入進來。
現在components內創建dev-article.vue文件。，里面目前是一個空的模板
我們在main.js里面去注冊這個組件。
這樣我們就把這個組件全局注冊到我們的項目里面。任何一個地方就可以直接飲用，而不是局部的去導入了
測試一下我們的組件：
我們在組件內隨便 一個hello。外層要用div去包裹
我們子啊views/App.vue直接引入過來這個全局的組件。
修改整一個地方，這里飲用的路徑寫錯了。修改為dev-article
默認地址是空的：
我們在router內增加一個，當時默認路徑的時候，重定向到app這個頁面。
這樣我們默認就到重定向到app這個頁面了
那就說明我的流程就已經通了
剩下就是完善我們的組件 dev-article.vue
首頁布局
Layout外層肯定是一個layout組件，所以我們先寫一個layout作為它做外層的一個跟組件
左邊是sider，為了讓它的布局更清晰一點。我們在里面再嵌套個layout
基本的一個布局的效果
Header隨着頁面的滾動而懸停在頂部的。
背景色淺黑色的陰影，用rgba
Header的樣式
頂部的一個效果，但是沒有背景顏色
用grid布局對header進行三列的布局
包含在Row標簽內。 因為IDE工具對於Col識別不是很友好，所以這里使用i-rol來代替
4+14+4=22 加上左邊平移的一列和最后空出來的一列剛好是24列
第一列是Log。在這里是個靜態資源 ，我們直接導過來就可以了
顯示的太大了 我們需要額外的寫一些樣式，來調整尺寸
Logo樣式
菜單布局
點擊后面三個菜單 ，頁面上都沒有任何東西
頭像菜單下拉和通知
32分鍾開始
里面三個元素是等分的，所以我們在右側再嵌套一層柵格
三個等分就是span都是8
把他這個頭像的地址復制出來
下拉菜單用的Dropdownmenu這個組件。
屬性slot=list指定它為Dropdown的list下拉菜單
設置用的組件Badge
設置和退出之間增加一個間隔線
Divided是一個bool值開啟就可以了。
通知的下拉菜單效果
我們會用badage的組件
點擊圖標進行復制
這樣就直接把圖標代碼復制過來了。
最終代碼:size是設置尺寸。
:count是緯度的消息的數量
當然你也可以通過變量的形式去綁定
查看頁面效果：
代碼是數字圖標：
但是數字距離圖標的距離有一些問題。
這個時候我們可以使用offset，接收一個數組，20表示距離頂部，4表示距離右側
直接復制這部分的tab的代碼。
直接復制tabs的代碼到vscode中進行修改
增加一個居中的class屬性
最下面增加一個class的居中。
設置tabs的name值為第一個tab的name值那么默認選中的是第一個tab
高度有一點小
設置一下高度為200就可以了。
糾正錯誤col列寫錯了
糾正后的樣式：
選擇配色 抽屜
抽屜在iview3.1.0版本中，新增加的
官方demo的效果。
在layput的最下方增加抽屜的標簽。用v-model綁定一個變量。
給icon圖標增加點擊事件。
這樣當點擊color的icon圖標聚會顯示抽屜了
抽屜默認不顯示 關閉的按鈕
這樣就不帶刪除的按鈕了。
優化代碼：
優化按鈕下面的灰色的線條
我們可以對css進行替換就可以了。F12查看這里的css樣式
這里是一個：after的偽類
這里是一個1像素的高的灰色的線的背景
視頻覆蓋這個css屬性為display:none就可以了。但是我本地的代碼始終有問題。
視頻中的效果：
繼續開發左側的sider組件
先給sider寫css 的樣式
v-mode綁定的值
編寫sider的css樣式
Option1被擋住了。那么我們給menu增加css 的樣式。
點擊收起的時候讓options名字消失 光顯示icon的圖標
使用css 來控制，這是最簡單的方法
通過isCollapsied來判斷。Clas屬性cider-hide是否顯示
定位menuItem中的span標簽進行隱藏
按照層級關系去隱藏
展開的效果
面包屑組件
增加一個calss屬性，並且動態設置另外一個class屬性
Left是左側的sider的寬度
距離左側240是sider的寬度
距離頂部是header高度
增加一個內間距padidng 為16px
然后增加一個動畫的效果 all是對所有的元素 使用動畫。
0.2s秒的延遲，效果是eas-in-out的效果
增加一個card的占位。然后加了style的css屬性
Slot就是每個頁面要定義的內容了。
Slot承載我們每個頁面核心內容的地方
51分鍾面包屑組件