安装mint-ui

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

引入mint-ui

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。

按需引入（推荐）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将.babelrc（在babel.config.js中添加） 修改为：

{
  "plugins": ["other-plugin", ["component", [
    { "libraryName": "mint-ui", "style": true }
  ]]]
}

Swipe – 轮播图

使用按需引入在mian.js文件下引入并注册组件swipe和swipeItem：

import { Swipe, SwipeItem } from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

注意需要引入css文件。

使用轮播图组件：

注意需要给mint-swipe设置高度，否则无法看到图片。

API

Slot

mt-swipe

mt-swipe-item