我們知道，當我們使用js和jQuery寫網(wǎng)頁的時候，我們可以從網(wǎng)上選擇很多的插件，來減輕我們的壓力。使用Vue.js之后，我們也可以選擇質(zhì)量更好的第三方UI組件庫。庫的意思，是一個包里，有很多的組件可供選擇。我們這里選擇有餓了么大前端組出品的MintUI組件庫 。你們也可以使用手機，輸入http://elemefe.github.io/mint-ui/#/ ，在手機中預覽這個組件庫。
安裝組件庫
首先我們初始化項目，并且安裝組件庫，注意我們要選擇帶vue-router路由庫的項目模板
- 初始化項目
# vue init webpack projectfour
# cd projectfour
# cnpm install
- 安裝mint-ui組件庫
mintui文檔中的安裝方法：
# cnpm install mint-ui -S
- 安裝Stylus解釋器
# cnpm install stylus --save-dev
# cnpm install stylus-loader --save-dev
- 運行服務(wù)器
# cnpm run dev
- 完成引入
官方文檔中：
所以我們在main.js中，引入：
- 然后我們就可以啟動服務(wù)器了
# cnpm run dev
創(chuàng)建頁面框架
- 首先我們知道，一個手機頁面，都需要在html的<mate>標簽設(shè)置禁止縮放和規(guī)定高寬度。我們將這句代碼，復制到index.html中
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 然后我們想實現(xiàn)一個四分欄
我們可以分析一下，首先他的頂部header，底部的tabbar，都可以拆分開來放在公共部分，然后中部的術(shù)語index主頁的部分，可以放入index組件，其他的tab的內(nèi)容，也可以放在相應的組件中。
-
我們先來寫主頁面App.vue的公共部分：
·首先我們在mintui的文檔中找到header的部分：
我們這里就使用不帶返回鍵的帶右邊的樣式，黏貼代碼到App.vue中
實現(xiàn)的效果就是
-
然后我們再來做tabbar，同樣的找到文檔中的代碼，復制到App.vue中：
這里用到的圖片，可在文末的實例工程中找到
- 然后我們可以看到，tabbar綁定了一個數(shù)據(jù)selected，我們需要在data內(nèi)，定義這個數(shù)據(jù)。然后我們監(jiān)視這個數(shù)據(jù)，看看每次它改變之后都是什么值，還記得我們todolist哪里用的監(jiān)視的函數(shù)么？
https://cn.vuejs.org/v2/api/#watch
我們看到他這個selected就是每個tab的id值，我們之前，每次剛進入的時候，他是沒有選中任何一個tab的，那么我們把selected的初始值，改為首頁，就可以剛進入就選中主頁了：
但是我們發(fā)現(xiàn)，選中某一個tab，我們怎么改變此tab的顏色呢？我們是不是可以借助watch來監(jiān)視selected值的改變，然后動態(tài)的改變tab的圖標呢？這個大家思考思考，這次就不說了。
然后我們發(fā)現(xiàn)，我們現(xiàn)在選擇了不同的tab，可是還是不能改變中間的內(nèi)容。這里有兩種方法分別介紹，不過我們要先來新建這四個組件
-
在components中新建home.vue,near.vue,firend.vue和my.vue
1、使用MintUI的tab-container組件
-
首先在App.vue import這四個組件
-
然后在components中注冊
-
然后我們復制tab-container組件代碼到原來的<router-view>標簽的地方
-
然后我們來改造這個
第一步新建一個變量
-
然后看看效果：
成功
2、使用router路由
使用路由來控制的方法這里不一步一步來了我大致說一下步驟，感興趣的話自己試一下
首先我們在router的index.js里中引入組件、編輯路由表
在App.vue里監(jiān)視selected，判斷val，更具val，來控制前往哪一個頁面
首頁
好了我們現(xiàn)在可以開始寫首頁的具體頁面了，對了我剛剛在tabbar那里，加了個fixed屬性防止他滾動：
-
先拉一個幻燈片下來
示例
image.png
- 發(fā)現(xiàn)幻燈片的周圍有margin，為啥？因為我們忘記css reset了，我們百度一個reset代碼：
http://meyerweb.com/eric/tools/css/reset/ ，復制下來在assets里新建一個css或者stly拷貝進去，在main.js里import進來就可以啦：
-
發(fā)現(xiàn)還是有上邊的，開發(fā)者工具看一下，原來是這里：
App.vue -
要修復這個問題，我們需要找到header的高度，我們開發(fā)者工具測一下：
40px
-
完美，我們再把這個變成圖片吧
CSS
效果
剩下的？
- 剩下的，你們發(fā)揮自己的想象力，Do It Yourself吧
工程文件
- 圖片資源 http://down.clubunion.cn/ImageResource.zip
- 工程文件 http://down.clubunion.cn/projectfour.zip
- 怎么使用？解壓，cd cnpm install rundev
結(jié)束
var author = {
name:'丁波',
GitHub:'dingbo1028',
University:'BNUZ'
}
