Vue_2 --- 自定义插件

0. 概述

用于增强Vue,插件中定义的各种方法,可以在全局中使用

1. 定义插件

src/plugins.js

export default {
   // Vue会自动调用install(),第一个参数是Vue对象,其他参数是插件使用者传递的参数
   install(Vue,options) {
       // 定义全局过滤器
       Vue.filter("mySlice",function (value) {
           return value.slice(0,4)
       })
       
       // 定义全局指令
       Vue.directive("fbind",{
           
       })
       
       // 定义全局混入
       Vue.mixin({
           methods:{
               alertInfo(){
                   alert(this.name)
               }
           }
       })
       
       // 给Vue原型上添加一个方法(vm和vc都能使用)
       Vue.prototype.hello = ()=> alert("你好")
   }
}

2. 应用插件

main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin} from "@/mixin";
import plugins form "./plugins"  // 1. 导入插件

Vue.config.productionTip = false
Vue.mixin(mixin)

Vue.use(plugins)   // 2. 应用插件

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