vue cli插件plugins的使用

应用场景：vue cli插件plugins中的方法均可以被任意组件调用，增强Vue的功能。

首先在创建好的vue项目的src目录下新建plugins.js：

export default {
  install(Vue) {
    // 全局过滤器
    Vue.filter('mySlice', function(value){
      return value.slice(0, 4);
    });
    
    // 自定义指令
    Vue.directive('fbind', {
      bind(el, binding, vnode) {
        el.value = binding.value;
      },

      inserted(el) {
        el.focus();
      },

      update(el, binding) {
        el.value = binding.value;
      }
    });

    // Vue构造函数原型上添加方法
    Vue.prototype.hello = ()=>{
      console.log('hello');
    }

  }
}

在main.js中引入plugins，并使用Vue.use应用插件：

import Vue from 'vue'
import App from './App'
import plugins from './plugins'

Vue.config.productionTip = false
Vue.use(plugins)

new Vue({
  el: '#app',
  render: h => h(App)
})

School.vue组件中使用插件plugins中的方法：

页面效果：