Vue PC端常用UI組件庫：
http://www.itdecent.cn/p/669d3e41dca6
vue移動端常用UI組件庫：
https://blog.csdn.net/weixin_38633659/article/details/89736656

VUE移動端框架UI組件庫-Mint UI使用方法：

1.團隊維護
2.真正做到了按需引入，每個組件有單獨的包
3.CSS3 處理各種動效
4.組件齊全
5.適用于移動端常規(guī)項目

官網(wǎng)：https://mint-ui.github.io/#!/zh-cn
1.安裝

sudo cnpm i mint-ui -S

2.引入完整的 Mint UI

//main.js引入餓了么MintUI移動組件庫
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

3.使用（按需引入）
http://mint-ui.github.io/docs/#/zh-cn2

//需要的頁面
import { Toast } from 'mint-ui';
//沒引入就不會彈出提示
Toast('提示信息');

踩坑：
【1】使用哪個組件都需要引入一下
【2】Swipe輪播的組件需要設置寬高才顯示（但是Swipe不用單個引入，在main.js 全局引入即可）
【3】在 Vue 2.0 中，為自定義組件綁定原生事件必須使用 .native 修飾符
<my-component @click.native="handleClick">Click Me</my-component>
【4】深入改變mint ui源碼組件樣式>>>或者/deep空格+元素

  >>> .picker-item{
    font-size: 36px;
    color: red;
  }

或者

 /deep/ .picker-item{
    font-size: 36px;
    color: red;
  }

【5】動態(tài)改變輪播第幾個

  <div class="wrapper">
    <mt-swipe class="swipe" ref="swipe" :auto="0" :defaultIndex="defaultIndex">
      <mt-swipe-item>1</mt-swipe-item>
      <mt-swipe-item>2</mt-swipe-item>
      <mt-swipe-item>3</mt-swipe-item>
      <mt-swipe-item>4</mt-swipe-item>
      <mt-swipe-item>5</mt-swipe-item>
    </mt-swipe>
  </div>

  methods: {
    changeSwipe(index) {
      this.defaultIndex = index; //defaultIndex是組件初始顯示的輪播圖的索引
      this.$refs.swipe.swipeItemCreated(); //swipeItemCreated方法是swipe組件內(nèi)部的方法，可以使組件重渲染
    }
  }