vue中使用Mint UI以及排坑

1、Mint ui介绍

Mint UI 是饿了么团队开源的一款基于 Vue.js 的UI组件库（主要是针对移动端）
Mint UI中文官方教程
Mint UI其它中文版教程
Mint UI Github地址
特性：
（1）、Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
（2）、按需加载组件，可以加载声明过的组件，不必要引入全部的UI组件，需要用什么就选择性的用什么，这样可以减小我们项目的体积，加快加载速度。
（3）、在移动端渲染性能高，体验流畅

2、Mint ui安装和配置

进入根目录
npm i mint-ui -S

1）全部引入mint-ui

在main.js中全部引入mint-ui

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

Vue.use(Mint)

2）vue2.0按需引入mint-ui，引入需要的组件，可以减少项目大小

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
先安装 babel-plugin-component
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

按照文档上配置，会报错

在main.js中全部引入部分mint-ui组件，比如轮播图

import {Swipe, SwipeItem} from 'mint-ui'

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

3、Mint ui使用

1）实现消息提示

采用全部引入
import { MessageBox } from 'mint-ui'
MessageBox('提示', '操作成功')

2）实现索引

在组件中加入

    <mt-index-list>
    <mt-index-section index="A">
      <mt-cell title="Aaron"></mt-cell>
      <mt-cell title="Alden"></mt-cell>
      <mt-cell title="Austin"></mt-cell>
    </mt-index-section>
    <mt-index-section index="B">
      <mt-cell title="Baldwin"></mt-cell>
      <mt-cell title="Braden"></mt-cell>
    </mt-index-section>
    <mt-index-section index="c">
      <mt-cell title="Zack"></mt-cell>
      <mt-cell title="Zane"></mt-cell>
    </mt-index-section>
  </mt-index-list>

3）实现轮播图

 <div style="height:200px">
      <mt-swipe :auto="4000">
        <mt-swipe-item>1</mt-swipe-item>
        <mt-swipe-item>2</mt-swipe-item>
        <mt-swipe-item>3</mt-swipe-item>
      </mt-swipe>
    </div>

记得要给轮播图一个高度

4）操作表

按照文档内容是做不出来的，需要到github上下载demo


将action-sheet.vue复制到项目中

在组件中导入