Close read Vue official documentation series 🎉

Define the plugin

Plug-ins are commonly used to add global functionality or resources to a Vue:

  1. Add global methods or properties.
  2. addVueInstance method (add toVue.prototype).
  3. Add global directives.
  4. Add some component options through global blending.
  5. registeredVueComponents.

Example:

export let _Vue;
MyPlugin.install = function (Vue, opt) {
  if (install.installed && _Vue === Vue) return;
  install.installed = true;

  // Add global attributes or methods
  app.globalProperties = {
    appName: "myApp".version: "0.1.1".myGlobalMethod(){}};// Add a global directive
  Vue.directive("my-directive", {
    bind(el, binding, vnode, oldVnode) {
      / / logic...}});// Add global mixin
  Vue.mixin({
    beforeCreate() {
      if (isDef(this.$options.router)) {
        this._routerRoot = this;
        this._router = this.$options.router;
        this._router.init(this);
        Vue.util.defineReactive(this."_route".this._router.history.current);
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this; }},destroyed() {
      //....}});// Add instance methods

  Object.defineProperty(Vue.prototype, "$router", {
    get() {
      return this._routerRoot._router; }});Object.defineProperty(Vue.prototype, "$route", {
    get() {
      return this._routerRoot._route; }});// Register the component
  Vue.component("RouterView", View);
  Vue.component("RouterLink", Link);
};
Copy the code

Plugins for vue.js should expose an install method whose first argument is the Vue constructor, passed in automatically when vue.use (MyPlugin) is called for registration, and whose second argument is an optional object option that provides some initialization parameters for the plug-in’s registration.

The use of plug-in

Use (register) the plug-in through the global method vue.use (). It needs to be done before you call new Vue() to start the application:

/ / call ` MyPlugin. Install ` (Vue)
Vue.use(MyPlugin)

new Vue({
  / /... Component options
})
Copy the code

Parameter is an optional object option that helps with some initialization at plug-in registration time.

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

Vue plug-in architecture diagram

Use plug-ins for bulk registration

const locale = locale$1.use;
const defaultInstallOpt = {
    size: ' '.zIndex: 2000};const install = (app, opt) = > {
    const option = Object.assign(defaultInstallOpt, opt);
    locale(option.locale);
    if (option.i18n) {
        locale$1.i18n(option.i18n);
    }
    app.config.globalProperties.$ELEMENT = option;
    config.setConfig(option);
    // Batch register components
    components.forEach(component= > {
        app.component(component.name, component);
    });
    // Batch register plug-ins. The plugin object itself is already attached to the static method 'install'.
    plugins.forEach(plugin= > {
        app.use(plugin);
    });
};
Copy the code

Bulk registrations are mostly used for UI component libraries.