插件MyPlugin.js
module.exports = (function() {
var install = function install(Vue) {
if (install.installed) return;
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
el.innerHTML = 'DDDD'
}
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 4. 添加事例方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}
}
return install;
})()
调用main.js
import Vue from 'vue'
import App from './App.vue'
import MyPlugin from './MyPlugin'
Vue.use(MyPlugin)
var vm = new Vue({
el: '#app',
render: h => h(App)
})
Vue组件App.vue
<template>
<div id="app">
<div v-my-directive></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
mounted: function() {
}
}
</script>