mint-ui框架的使用

一、安裝mint-ui框架：

cnpm  install mint-ui --save-dev

在main.js入口文件中引入並命名用mint-ui框架

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

在app.vue組件中使用：

<template>  
  <div class="page-tabbar">  
    <div class="page-wrap">  
      <div class="page-title">Tabbar</div>  
      <div>  
        <mt-cell class="page-part" title="當前選中" :value="selected" />  
      </div>  
  
    <!-- tabcontainer -->  
      <mt-tab-container class="page-tabbar-container" v-model="selected">  

        <mt-tab-container-item id="外賣">  
          <mt-cell v-for="n in 10" :title="'餐廳 ' + n" />  
        </mt-tab-container-item>  

        <mt-tab-container-item id="訂單">  
          <mt-cell v-for="n in 5" :title="'訂單 ' + n" />  
        </mt-tab-container-item>  

        <mt-tab-container-item id="發現">  
          <mt-cell v-for="n in 7" :title="'發現 ' + n" />  
        </mt-tab-container-item>  
        
        <mt-tab-container-item id="個人">  
          <div class="page-part">  
           <!-- cell -->  
            <mt-cell v-for="n in 12" :title="'個人 ' + n" />  
          </div>  
          <router-link to="/">  
           <!-- button -->  
            <mt-button type="danger" size="large">退出</mt-button>  
          </router-link>  
        </mt-tab-container-item>  
      </mt-tab-container>  
    </div>  
  
    <mt-tabbar v-model="selected">
      <mt-tab-item id="外賣">
        <img slot="icon" src="../assets/logo.png">
        外賣
      </mt-tab-item>
      <mt-tab-item id="訂單">
        <img slot="icon" src="../assets/logo.png">
        訂單
      </mt-tab-item>
      <mt-tab-item id="發現">
        <img slot="icon" src="../assets/logo.png">
        發現
      </mt-tab-item>
      <mt-tab-item id="個人">
        <img slot="icon" src="../assets/logo.png">
        個人
      </mt-tab-item>
    </mt-tabbar>
  </div>  
</template>  
  
<script>  
export default {  
  name: 'tabbar',  
  data() {  
    return {  
      selected: '外賣'  
    };  
  }  
};  
</script>  
  
<style>  
  .page-tabbar {  
    overflow: hidden;  
    height: 100vh;  
  }  
  
  .page-wrap {  
    overflow: auto;  
    height: 100%;  
    padding-bottom: 100px;  
  }  
</style>  

　　效果以下：