vue移动端框架UI组件库-Mint UI

Vue PC端常用UI组件库：
https://www.jianshu.com/p/669d3e41dca6
vue移动端常用UI组件库：
https://blog.csdn.net/weixin_38633659/article/details/89736656

VUE移动端框架UI组件库-Mint UI使用方法：

1.团队维护
2.真正做到了按需引入，每个组件有单独的包
3.CSS3 处理各种动效
4.组件齐全
5.适用于移动端常规项目

官网：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】动态改变轮播第几个

  <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组件内部的方法，可以使组件重渲染
    }
  }