安装

npm i mint-ui -S

配置

全部调用

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 }
})

局部调用

安装插件

npm install babel-plugin-component -D

main.js:

import Vue from 'vue'

// 引入mint-ui 框架样式 (新增)
// 按需加载js (新增)
import MintUI from '@/MintUI/MintUI'

import App from './App.vue'

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

将 .babelrc 修改为：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]
  ],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

在 src 目录下创建 MintUI 文件夹

在 MintUI 文件夹先 创建 MintUI.js

//必须引入
import Vue from 'vue'

// 调用轮播图
import { Swipe, SwipeItem } from 'mint-ui';

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

// 调用 提示框
import { MessageBox } from 'mint-ui';

//调用 微标
import { Badge } from 'mint-ui';

Vue.component(Badge.name, Badge);

需要调用其他组件，在官网API复制过来就可以