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複製到項目中

在組件中導入