全局引入
安装:
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)
注意
- mint-ui里的Toast, MessageBox不是全局变量,在使用的pages里还得重新引入:
import { Toast, massageBox } from 'mint-ui'
或 - 提供一个实例上的方法,通过 原型 调用:
在main.js:
Vue.prototype.$toast = Toast
Vue.prototype.$messagebox = MessageBox
全局使用:
this.$toast('手机号错误')
this.$messagebox (data.retMsg)
- 按需加载使用swipe组件,要引入两个组件,Swipe和SwipeItem:
import { Swipe, SwipeItem } from 'mint-ui'