Vue.js - 插件的使用

在 Vue 中，什么是插件？

• Vue 中的插件，我们可以理解为就是 对于 Vue 本身功能的增强 。
• 举个例子，我们经常使用的 Vue-Router，Vuex，Element-UI，就算是一种插件。
• 在 Vue 本身不支持这些功能的情况下，让 Vue 可以使用这些功能，这些就是插件。

怎么使用插件？

• 1. 定义插件
• 2. 注册插件

Vue2 中注册插件的方式：

1. 对象定义插件：

const plugin = {
    install(Vue){
        // 只要你可以通过 Vue 做到的事情，都可以定义成插件来完成
        // 1.全局组件注册  Vue.component
        // 2.全局指令注册  Vue.directive
        // 3.原型挂载	  Vue.protorype.$http = function(){}
    }
    // 注册：Vue.use(注册的名字)
    Vue.use(plugin)  // 当调用 use 方法的时候，实际上是自动执行了插件的 install 方法，然后注入了实参 Vue
}

2. 函数定义插件：

function plugin(Vue){
     // 只要你可以通过 Vue 做到的事情，都可以定义成插件来完成
     // 1.全局组件注册  Vue.component
     // 2.全局指令注册  Vue.directive
     // 3.原型挂载	  Vue.prototype.$http = function(){}
}
// 注册
Vue.use(plugin)  // 当插件是函数的时候，函数本身就会被当成 install 方法自动执行，其他机制完全一样

Vue3 中定义插件的方式：

1. 对象定义插件：

const plugin = {
    install(app){  // * 注意：在 Vue3 中，实参为 app(应用)
        // 只要你可以通过 Vue 做到的事情，都可以定义成插件来完成
        // 1.全局组件注册  app.component
        // 2.全局指令注册  app.directive
    }
    // 通过执行 createApp，得到一个 app 实例对象，然后用 app 去调用 use
    // 注册：app.use(注册的名字)
    app.use(plugin)  // 当调用 use 方法的时候，实际上是自动执行了插件的 install 方法，然后注入了实参 Vue
}