代码地址：

https://github.com/hurong241/vue_study/tree/master/vue2-cli/src/components/68

需要在main.js中引入

//引入Vue
import Vue from 'vue'
//引入组件
import App from './App70.vue'
//引入插件
import plugins from './plugins'
//关闭生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(plugins)
//创建vm
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <div>
      vue 插件plugins：<br/>
      可以在其中定义全局过滤器、全局指令、混入、在原型上添加方法等
      <hr/>
    </div>
    <School></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/68/School.vue";

export default {
  name: 'App',
  components: {
    School,
  }
}
</script>

<style>
.app {
  background-color: #999;
  padding: 10px;
}
</style>

School.vue

<template>
  <div>
    <!--语法检查：所有有模板内容都应该放在最外层的div内-->
    <p>id：{{ school.id }}</p>
    <!--调用插件plugins.js中定义的全局过滤器-->
    <p>用plugins中的过滤器过滤名称：{{ school.name| mySlice }}</p>
    <p>地址：{{ school.address }}</p>
    <p>用plugins中的全局指令生成一个input并获得焦点：<input type="text" v-fbind:value="school.name"></p>
    <button @click="showId(school.id)">弹出id</button>
    <button @click="hello">原型上的hello</button>
  </div>
</template>

<script>
import {mixin} from "@/mixin";

export default {
  name: 'MySchool',//名称格式示例要2个词组成首字母大写：MySchool
  components: {},
  data() {
    return {
      school: {
        'id': '001',
        'name': '清华大学好长啊，用plugins中的过滤器，只要前面4个字符',
        'address': '北京'
      }
    }
  },
  mixins: {mixin},
}
</script>

<style>

</style>

plugins.js

/**插件**/
export default {
    install(Vue) {
        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 8)
        })
        //定义全局指令
        Vue.directive('fbind', {
            //指令与元素成功绑定时
            bind(element,binding){
                element.value=binding.value
            },
            //指令所在元素被插入页面时
            inserted(element){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value=binding.value
            }
        })
        //定义混入
        Vue.mixin({
            //往bm上添加数据
            data() {
                return {
                    'plugin-test': '我来自plugins.js中的Vue.mixin.data()',
                }
            },
            methods: {
                //注意：如果在plugins.js中定义了混入，将会覆盖mixin.js
                showId(id) {
                    alert('我来自plugins.js中,id:'+id)
                }
            }
        })
        //在原型上添加方法
        Vue.prototype.hello = () => {
            alert('hello,i am from plugins.js')
        }
    }
}