初始化vue專案

npm install -g vue-cli
vue init webpack demo # 中間會讓你選npm yarn 等來安裝依賴，我選的是yarn，因為它快些

安裝mint-ui

yarn add mint-ui

mint-ui裝好了，還要配置一下babel，方法跟著mint-ui的官方文件來配置就可以了

下面是我配置好的 .babelrc 檔案，啟動的時候會報跟es2015相關的錯，裝一下babel-preset-es2015就好了

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

整合

開啟建立的vue專案demo，在src裡找到components/HelloWorld.vue檔案，然後將內容換成下面內容

<template><div><mt-swipe :auto="2000"><mt-swipe-itemv-for="item in items" :key="item.id"><a :href="item.href"><img :src="item.url"class="img"/><spanclass="desc">{{item.title}}</span></a>
 
</mt-swipe-item></mt-swipe></div></template><script>import{Swipe,SwipeItem} from 'mint-ui'import'mint-ui/lib/style.css'exportdefault{
    components:{'mt-swipe':Swipe,'mt-swipe-item':SwipeItem},
    data (){return{
        items:[{
          title:'你的名字',
          href:'http://google.com',
          url:'http://localhost:8080/static/img1.png'},{
          title:'我的名字',
          href:'http://baidu.com',
          url:'http://localhost:8080/static/img2.png'}]}}}</script><stylescoped>
  img {
    width:100%;}.mint-swipe {
    height:218px;}.desc {
    font-weight:600;
    opacity:.9;
    padding:5px;
    height:20px;
    line-height:20px;
    width:100%;
    color:#fff;
    background-color: gray;
    position: absolute;
    bottom:0;}</style>

找兩張圖片，名字分別是 img1.png, img2.png, 放在demo專案的static裡，然後啟動專案

npm run dev

注意

1. 如果發現文字都是居中的

可以找到檔案 App.vue 把裡面的居中css程式碼去掉就好了

1. 如果頁面有內邊距

設定一下 body 的樣式 margin: 0 auto;

1. 頁面裡用的時候，必須要給類樣式一個高度，要不然圖片不出來 .mint-swipe { height: 218px; }