在Vue中使用插件的步骤

在 Vue（尤其是 Vue2）中使用插件的步骤主要包括以下 3 步：

一、引入插件（import / require）

import MyPlugin from 'my-plugin'

如果是 UMD 格式的插件，也可以通过 <script src="..."> 方式引入。

二、使用 Vue.use() 注册插件

Vue.use(MyPlugin)

有些插件还支持传入配置项：

Vue.use(MyPlugin, {
  option1: true,
  option2: 'custom value'
})

调用 Vue.use() 后，插件会自动执行其内部的 install 方法。

三、在组件中使用插件提供的功能

插件通常提供以下几种内容：

插件功能类型	使用方式示例
添加全局方法	Vue.myGlobalMethod()
添加实例方法	this.$myMethod()
添加全局组件	<my-component /> 直接使用（已全局注册）
添加指令	<div v-my-directive />
添加混入	插件中定义了全局混入，影响所有组件

示例：自定义插件使用流程

定义插件 myPlugin.js

export default {
  install(Vue, options) {
    // 添加实例方法
    Vue.prototype.$sayHello = function(name) {
      console.log(`Hello, ${name || 'World'}!`)
    }
  }
}

在入口文件 main.js 中注册插件

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

Vue.use(MyPlugin)

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

在组件中使用插件功能

export default {
  mounted() {
    this.$sayHello('Vue')
  }
}

小结

步骤	说明
1️⃣	引入插件（import）
2️⃣	Vue.use(plugin[, options]) 注册
3️⃣	在组件中通过 this.$xxx 或 <component> 使用