全局导入mint-ui和按需引入mint-ui

mint-ui 是基于Vue.js的移动端组件库

安装Mint-UI

cnpm i mint-ui -S

全局导入

，在main.js 文件中先导入Vue.js，然后再导入：

import MintUI from 'mint-ui';  //这是把所有组件导入进来
import 'mint-ui/lib/style.css'
//将 MintUI 安装到 Vue 上
Vue.use(MintUI);  //把所有组件注册为全局组件

按需导入

1. 首先安装 babel-plugin-component:
   cnpm i babel-plugin-component -D

2. 然后打开 .babelrc 文件，进行修改配置：

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

3. 比如像导入 Button 组件：

import { Button } from 'mint-ui'
//使用 Vue.component 注册按钮组件
Vue.component(Button.name,Button)

4. 然后在要用按钮组件的 template 引用就行：

<template>
  <div>
    <mt-button type="danger" disabled icon="more">default</mt-button>
    <mt-button type="primary" size="large" plain>default</mt-button>
    <mt-button type="default" size="small" @click="show">default</mt-button>
  </div>
</template>

注意：
在第3步，注册组件的时候， Button.name 其实就是你给组件起的名字，如果不想用 mint-ui 定义好的名字，你也可以自定义，例如：

Vue.component('mybtn',Button);

引用组件：

<template>
  <div>
	<mybtn>自定义的组件名</mybtn>
  </div>
</template>