Vue學習8-項目實戰一：完成header、tabbar區域、路由組件切換與輪播圖功能

上一篇 Vue學習7-MinUI組件的介紹與把項目託管到碼雲上
下一篇 Vue學習9-項目實戰二：完成九宮格、組件切換、新聞列表、時間過濾器、評論功能

---

一、安裝Mint UI

Mint UI官網

# Vue 2.0 
npm install mint-ui -S 

在main.js中引入

 // 引入全部組件 
 import Vue from 'vue'; 
 import Mint from 'mint-ui'; Vue.use(Mint); 

 // 按需引入部分組件 
 import { Cell, Checklist } from 'mint-ui'; 
 Vue.component(Cell.name, Cell); 
 Vue.component(Checklist.name, Checklist); 

二、項目header區域

1、導入MinUI

2、在組件中使用

3、調整頁面

4、效果

三、項目tabbar區域

準備資源

1、導入MUI樣式

2、去hello MUI找樣式

https://dcloud.io/hellomui/

3、找到想要的樣式->右鍵 查看源代碼

4、複製到XX.vue組件使用

5、圖標樣式

四、路由組件切換

1、新建組件

2、設置路由

3、路由的容器

4、配置路由

5、效果展示

五、首頁輪播圖

1、去MinUI找輪播圖（swipe）

http://mint-ui.github.io/docs/#/en2/swipe

2、放入vue組件

3、設置樣式

4、效果展示

六、axios獲取輪播圖數據

1、安裝axios：npm i axios -S

2、配置axios

3、發起請求

七、提交到碼雲上

---

上一篇 Vue學習7-MinUI組件的介紹與把項目託管到碼雲上
下一篇 Vue學習9-項目實戰二：完成九宮格、組件切換、新聞列表、時間過濾器、評論功能