Vue CLI：plugin 插件

plugin 插件是什么

• 功能：用于增强Vue（向 Vue.js 添加全局方法或全局资源）
• 作用域：始终是全局的，因此一旦安装了插件，它就可以在任何组件中使用
• 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
• 定义插件

  export default {
      install(Vue) {
          console.log("插件内容");
      }
  }
  //简写
  const install = (Vue) => { 
      console.log("插件内容");
  }
  export default install;

• 使用插件（Vue.use()）：

  import plugins from './plugin'; // 引入插件
  Vue.use(plugins,1,2,3); // 应用（使用）插件

示例

src/plugin.js

export default {
    install(Vue, vm) {
        debugger;
        console.log(vm);

        // 全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 3);
        });

        // 定义全局指令
        Vue.directive('fbind', {
            // 指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },

            // 指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },

            // 指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            }
        });

        // 定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            }
        });

        // 给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = () => {
            alert('你好啊');
        }
    }
}

src/main.js

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

import plugins from './plugin'; // 引入插件
Vue.use(plugins,1); // 应用（使用）插件

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