首先在vue2.0中webpack中下載 mint ui
然后再main.js引入
這樣就可以使用mint ui里面的布局組件了
html部分（就是你要使用底部選項卡的部分）
<!--底部選項卡-->
<mt-tab-container v-model="selected">
<mt-tab-container-item id="one">
one
</mt-tab-container-item>
<mt-tab-container-item id="two">
two
</mt-tab-container-item>
<mt-tab-container-item id="three">
three
</mt-tab-container-item>
<mt-tab-container-item id="four">
four
</mt-tab-container-item>
</mt-tab-container>
<div class="bottom-bar">
<mt-tabbar v-model="selected">
<mt-tab-item id="one">
<img slot="icon" src="assets/logo.png">
外賣
</mt-tab-item>
<mt-tab-item id="two">
<img slot="icon" src="assets/logo.png">
訂單
</mt-tab-item>
<mt-tab-item id="three">
<img slot="icon" src="assets/logo.png">
發現
</mt-tab-item>
<mt-tab-item id="four">
<img slot="icon" src="assets/logo.png">
我的
</mt-tab-item>
</mt-tabbar>
</div>
<!--底部選項卡-->
js部分
這樣就可以使用了
值得一提的是官網的列子分開的如果復制合並會發現里面v-model =“”里面綁定的值不一樣 我們改成一樣的在data里面申明就可以用了（不聲明會報錯）。