Vue plugin usage

Plugins usually add global functions to 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) {
    // 逻辑...
  }

Use plugin

// 通过全局方法 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 will automatically prevent the same plug-in from being registered multiple times, and only register the plug-in once.
2. Some plugins (such as vue-router) are automatically called if Vue is a global variableVue.user()

Guess you like

Origin blog.csdn.net/zn740395858/article/details/76132630