插件

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开  install()  方法的  object，也可以是  function 。

功能：用于增强 Vue

本质：包含 install 方法的一个对象，install 的第一个参数是 app，第二个以后的参数是插件使用者传递的数据。

插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如**：vue-custom-element (opens new window)**
2. 添加全局资源：指令/过渡等。如**：vue-touch (opens new window)**）
3. 通过全局 mixin 来添加一些组件选项。(如**vue-router (opens new window)**)
4. 添加全局实例方法，通过把它们添加到  config.globalProperties  上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如  vue-router (opens new window)

编写插件

每当插件被添加到应用程序中时：如果它是一个对象，就会调用  install  方法；如果它是一个  function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的  createApp  生成的  app  对象和用户传入的选项 **options**。

1. 创建插件

   // plugins/i18n.js
   export default {
     install: (app, options) => {
       // Plugin code goes here
     },
   }
   

2. 插件中可以访问  app  对象，因而可以使用所有的应用 API，例如  mixin  和  directive。

   // plugins/i18n.js
   export default {
     install: (app, options) => {
   		// .....
   
       app.directive('my-directive', {
         mounted (el, binding, vnode, oldVnode) {
           // some logic ...
         }
         ...
       })
   
       app.mixin({
         created() {
           // some logic ...
         }
         ...
       })
     }
   }
   

使用插件

在使用  createApp()  初始化 Vue 应用程序后，可以通过调用  use()  方法将插件添加到应用程序中。

use()  方法有两个参数。第一个是要安装的插件。它还会自动阻止多次使用同一插件，因此在同一插件上多次调用只会安装一次该插件。

第二个参数是可选的，并且取决于每个特定的插件。

// 例： main.js
import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!',
  },
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')

awesome-vue (opens new window)  集合了大量由社区贡献的插件和库。

安装插件 use()

变更

在 vue2.x 是Vue.use()， 在 vue3.x 后变为 app.use()

语法

• 参数****：
  • {Object | Function} plugin
  • ...options (可选)
• 返回值：
  • 应用实例

const app = createApp({})
app.use(VueRouter).use(Vuex).use(ElementUI)

介绍

用来**安装 Vue.js 插件 (opens new window)。**例如 ElementUI, Router, Vuex 等部分第三方库、组件、自定义方法都需要这样引入。

• 如果插件是一个对象，则它必须暴露一个  install  方法。
• 如果插件本身是一个函数，则它将被视为  install  方法。该  install  方法将以应用实例作为第一个参数被调用，传给  use  的其他  options  参数将作为后续参数传入该安装方法。也就是说：
  1. Vue.use 参数为函数（插件为函数）时，函数的第一个参数是 Vue 对象
  2. Vue.use 参数为对象（插件为对象）时，它提供的 install 方法中第一个参数是 Vue 对象

当在同一个插件上多次调用此方法时，该插件将仅安装一次。

实例：在插件中注册全局组件

1. Vue.use 参数为对象（插件为对象）：

   // MyPlugin.vue
   import PageTools from './PageTools'
   
   const demo = {
     // 参数为对象时，需要提供install方法
     install: app => {
       app.component('PageTools', PageTools)
     },
   }
   export default demo
   
   // main.js
   import { createApp } from 'vue'
   import MyPlugin from './plugins/MyPlugin'
   
   const app = createApp({})
   
   app.use(MyPlugin)
   app.mount('#app')
   

2. Vue.use 参数为函数（插件为函数）：

   // MyPlugin.vue
   import PageTools from './PageTools'
   export default {
     install: (app) {
       app.component('PageTools', PageTools)
     }
   
   // main.js
   import { createApp } from 'vue'
   import MyPlugin from './plugins/MyPlugin'
   
   const app = createApp({})
   
   app.use(MyPlugin)
   app.mount('#app')
   

3. 传入自定义参数

   // MyPlugin.vue
   import PageTools from './PageTools'
   export default {
     install: (app, a, b, c) {
       app.component('PageTools', PageTools)
     }
   
   // main.js
   import { createApp } from 'vue'
   import MyPlugin from './plugins/MyPlugin'
   
   const app = createApp({})
   
   app.use(MyPlugin, 1, 2, {age:'23'})  // 安装自定义插件
   app.mount('#app')
   

Vue3.0 app.use() 注册全局组件_辛娟娟的博客-CSDN 博客_app.use(store) (opens new window)

Vue.use 的使用和基本原理_Boale_H 的博客-CSDN 博客_createapp vue.use (opens new window)