mintUI 移動UI框架入門

入門地址：

http://mint-ui.github.io/#!/zh-cn

 

下載依賴cd到項目目錄下，

下載我們用的UI框架：

分為全局引入和按需引入

全局引入：

npm install mint-ui -S   下載依賴

 

在man.js中引入

import Mint from 'mint-ui'; 

import 'mint-ui/lib/style.css'

Vue.use(Mint);

按需引入：

import { Cell, Checklist } from 'minu-ui';

Vue.component(Cell.name, Cell);

Vue.component(Checklist.name, Checklist);

 

引入完成。

然后就可以按照官網的實例進行操作了，自己簡單的做了一個demo

<template>
  <div class="hello">
    <mt-header title="標題過長會隱藏后面的內容啊哈哈哈哈">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="page-swipe">
      <mt-swipe :auto="4000">
        <mt-swipe-item :class="{slide1:true}">1</mt-swipe-item>
        <mt-swipe-item :class="{slide2:true}">2</mt-swipe-item>
        <mt-swipe-item :class="{slide3:true}">3</mt-swipe-item>
      </mt-swipe>
    </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: 'hello',
  data () {
    return {
      selected:2
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-swipe .mint-swipe {
    height: 200px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
  }
  .page-swipe .mint-swipe-item {
    line-height: 200px;
  }
  .page-swipe .slide1 {
    background-color: #0089dc;
    color: #fff;
  }
  .page-swipe .slide2 {
    background-color: #ffd705;
    color: #000;
  }
  .page-swipe .slide3 {
    background-color: #ff2d4b;
    color: #fff;
  }
  .page-swipe-desc {
    text-align: center;
    color: #666;
    margin-bottom: 5px;
  }

</style>