Was bedeutet das vue.js-Plug-in?

vue.js Plug-in wird normalerweise verwendet, um globale Funktionen zu Vue hinzuzufügen. Der Funktionsumfang des Plug-ins ist nicht streng auf die Verwendung des Plug-ins durch die globale Methode [Vue.use()] beschränkt Sie müssen die Anwendung starten, nachdem Sie [new Vue()] aufgerufen haben, bevor dies abgeschlossen ist.

【Empfohlene verwandte Artikel: vue.js】

Plug-Ins werden normalerweise verwendet, um globale Funktionen zu Vue hinzuzufügen. Es gibt keine strengen Einschränkungen hinsichtlich des Funktionsumfangs von Plug-Ins – im Allgemeinen gibt es folgende Typen:

• Globale Methoden oder Eigenschaften hinzufügen. Zum Beispiel: vue-custom-element

• Globale Ressourcen hinzufügen: Anweisungen/Filter/Übergänge usw. Beispielsweise fügt vue-touch

• einige Komponentenoptionen über globale Mixins hinzu. Beispielsweise fügt vue-router

• Vue-Instanzmethoden hinzu, indem es sie zu Vue.prototype hinzufügt.

• Eine Bibliothek, die ihre eigene API bereitstellt und gleichzeitig eine oder mehrere der oben genannten Funktionen bereitstellt. Beispielsweise verwendet Vue-Router

Plug-Ins

über die globale Methode Vue.use(). Es muss abgeschlossen sein, bevor Sie new Vue() aufrufen, um die Anwendung zu starten:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
  // ...组件选项
})

Sie können auch ein optionales Optionsobjekt übergeben:

Vue.use(MyPlugin, { someOption: true })

Vue.use verhindert automatisch mehrere Registrierungen desselben Plug-Ins und dann Nur das Plug-in wird einmalig registriert.

Einige offiziell von Vue.js bereitgestellte Plug-Ins (z. B. vue-router) rufen automatisch Vue.use() auf, wenn sie erkennen, dass Vue eine zugängliche globale Variable ist. In einer Modulumgebung wie CommonJS sollten Sie Vue.use() jedoch immer explizit aufrufen: Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

awesome-vue 集合了大量由社区贡献的插件和库。

开发插件

Vue.js的插件应该暴露一个 install

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

Plug-ins entwickeln

Das obige ist der detaillierte Inhalt vonWas bedeutet das vue.js-Plug-in?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!