Vue.js插件是一种增强Vue功能的方式,它允许你向Vue中添加全局功能,比如全局方法、指令、过滤器、混入等
创建Vue插件
export default {install(Vue, options) {// 添加全局方法或属性Vue.myGlobalMethod = function() {console.log('全局方法调用', options.message);};// 添加全局指令Vue.directive('my-directive', {bind(el, binding, vnode) {el.textContent = binding.value.toUpperCase();}});// 添加实例方法Vue.prototype.$myMethod = function(methodOptions) {console.log('实例方法调用', methodOptions, this);};}
};
使用Vue插件
一旦创建了插件,你可以通过Vue.use()方法在Vue应用中使用它。通常这一步骤在入口文件(如main.js)中完成。
import Vue from 'vue';
import App from './App.vue';
import MyPlugin from './my-plugin'; // 引入你的插件// 使用插件
Vue.use(MyPlugin, { message: 'Hello from plugin!' });new Vue({render: h => h(App)
}).$mount('#app');