vueApp引入mint-ui

全局引入

安装:
npm install mint-ui -S

在main.js:
import Mint from 'mint-ui'; Vue.use(Mint); // 引入全部组件
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

按需加载

安装:
babel-plugin-component 是按需加载插件

npm install mint-ui -S
npm i babel-plugin-component -D

配置.babelrc文件:

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    以下是新加的代码
    [
      "component",
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]
  ]

在main.js里需要什么引入什么:

import { Toast, MessageBox, Swipe, SwipeItem } from 'mint-ui'

Vue.prototype.$toast = Toast
Vue.prototype.$messagebox = MessageBox
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)

注意

  1. mint-ui里的Toast, MessageBox不是全局变量,在使用的pages里还得重新引入:
    import { Toast, massageBox } from 'mint-ui'
  2. 提供一个实例上的方法,通过 原型 调用:
在main.js:
Vue.prototype.$toast = Toast
Vue.prototype.$messagebox = MessageBox

全局使用:
this.$toast('手机号错误')
this.$messagebox (data.retMsg)
  1. 按需加载使用swipe组件,要引入两个组件,Swipe和SwipeItem:
import { Swipe, SwipeItem } from 'mint-ui'
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/db7...
    TigerChain阅读 64,752评论 5 81
  • 第一节 vue:读音: v-u-eview vue和angular区别?vue——简单、易学指令以 v-xxx一片...
    黑色的五叶草阅读 1,145评论 0 1
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,187评论 0 1
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组...
    鲁大师666阅读 43,493评论 5 97
  • 简说Vue (组件库) https://github.com/ElemeFE/element" 饿了么出品的VUE...
    Estrus丶阅读 1,808评论 0 1