插件通常会为vue添加全局功能
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
使用插件
// 通过全局方法 Vue.use() 使用插件
//调MyPlugin.install(Vue)
Vue.use(MyPlugin)
//传入一个选项对象
Vue.use(MyPlugin, { someOption: true })
import Vue from 'vue'
import App from './App'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import RegionPicker from 'vue-region-picker'
import CHINA_REGION from 'china-area-data'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.use(MintUI)
Vue.use(VueAwesomeSwiper)
Vue.use(RegionPicker, {
region: CHINA_REGION,
vueVersion: 2
})
1. Vue.use会自动阻止注册相同插件多次,只会注册一次该插件。
2. 一些插件(如vue-router)如果Vue是全局变量则自动调用Vue.user()