VUE3 development basics: develop using Vue.js custom plug-ins

As Vue.js increasingly becomes one of the preferred frameworks for front-end development, more and more developers are beginning to get involved in Vue.js plug-in development. Vue.js plug-in is a functional component that can be installed and reused globally. It can enhance the functions of Vue.js itself and add new functions to the Vue.js framework. In Vue.js version 3.0, plug-in development is simpler and more convenient. This article will introduce how to use Vue.js custom plug-ins for development.

1. What is Vue.js plug-in

The Vue.js plug-in is an independent component used to enhance the functions of the Vue.js framework. It can provide new instructions and filters for Vue.js Devices, components and other functions. First of all, we need to make it clear: Vue.js plug-ins are not components that are loaded as part of the Vue.js application, but components that are loaded and initialized as part of Vue.js itself. Vue.js plug-ins can be easily introduced and used by other developers, making it easier for us to implement Vue.js applications.

2. Use of Vue.js plug-in

The use of Vue.js plug-in is divided into two steps. First, we need to install the plugin into Vue.js before we can use it in our application.

1. Installing plug-ins

In a Vue.js application, we need to use the Vue.use() method to install plug-ins. This method receives a plugin object as a parameter and installs the plugin object into the Vue.js application.

For example, we wrote a plug-in object named MyPlugin:

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;
    // 在此处注册新的指令、过滤器、组件等。
  }
}

In this plug-in object, we define an install() method, within which the initialization of the plug-in can be performed. operate. In the install() method, we can register global directives, filters, components, etc. At the same time, we also need to maintain an installed attribute in the plug-in object to determine whether the current plug-in has been installed and avoid repeated installation.

Next, we use the Vue.use() method in the Vue.js application to install the plugin:

import Vue from 'vue';
import MyPlugin from './my-plugin';

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

Here, we use the ES6 import syntax to introduce the MyPlugin plugin object , and use the object as a parameter of the Vue.use() method. In addition, we can pass an options object to the Vue.use() method to configure the plugin when it is initialized. In the install() method of the MyPlugin plug-in object, we can access these configuration options through the options parameter.

2. Using the plugin

Now that we have installed the plugin into our Vue.js application, we can use the functionality provided by the plugin. The functions of the Vue.js plug-in can be used globally or locally.

In a Vue.js application, we can use the Vue.directive() method to register global directives, the Vue.filter() method to register global filters, the Vue.component() method to register global components, etc. For example, we registered a component named my-component in the install() method of the MyPlugin plug-in object:

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    Vue.component('my-component', {
      /* 组件选项 */
    })
  }
}

Next, in our Vue.js application, we can use Vue.js as Use this component just like the built-in component.

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  // 组件选项
}
</script>

Note that when registering a global component, the name of the component needs to start with a lowercase letter, and dashes must be used to connect multiple words in the template.

If we only want to use the plug-in function in a certain page or component, we can also register the plug-in locally in the page or component:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyPlugin from '@/my-plugin';

export default {
  components: {
    'my-component': MyPlugin.myComponent
  }
}
</script>

Here, we use the ES6 import The syntax introduces the MyPlugin plug-in object and registers the object as a component object that needs to be used in the local component.

3. Example of using plug-ins

Next, let’s look at an example of developing using Vue.js custom plug-in. Suppose we need to develop a global loading indicator that will automatically show and hide when the application performs asynchronous operations. We can write a plug-in named LoadingIndicator to implement this function:

const LoadingIndicator = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    const indicator = new Vue({
      template: `
        <div v-if="loading" class="loading-indicator">
          <div class="loading-spinner"></div>
        </div>
      `,
      data() {
        return {
          loading: false
        }
      }
    })

    const mountIndicator = () => {
      const component = indicator.$mount();
      document.body.appendChild(component.$el);
    }

    Vue.prototype.$loading = {
      show() {
        indicator.loading = true;
        mountIndicator();
      },
      hide() {
        indicator.loading = false;
        document.body.removeChild(indicator.$el);
      }
    };

    Vue.mixin({
      beforeCreate() {
        this.$loading = Vue.prototype.$loading;
      }
    });
  }
}

export default LoadingIndicator;

In the install() method of the LoadingIndicator plug-in object, we first define a Vue instance as the template of the indicator. After that, we mounted the Vue instance to the body element and defined a $loading global API to globally control the display and hiding of the indicator. At the same time, we defined a global mixin in the Vue.mixin() method so that every component can access the $loading API.

Now, we have written a LoadingIndicator plug-in that can be used globally. Using the plugin in a Vue.js application is very simple:

import Vue from 'vue';
import LoadingIndicator from '@/loading-indicator';

Vue.use(LoadingIndicator);

// 在异步操作开始时显示加载指示器
this.$loading.show();

// 在异步操作完成后隐藏加载指示器
this.$loading.hide();

Here, we first install the LoadingIndicator plugin into the Vue.js application using the Vue.use() method. Next, we call this.$loading.show() method in the code block that requires asynchronous operation to display the loading indicator, and then call this.$loading.hide() method to hide the loading indicator after the asynchronous operation is completed. .

Summary

The Vue.js plug-in is a powerful feature that can easily extend the functionality of the Vue.js framework. With the release of Vue.js 3.0, the development and use of plug-ins has become more convenient and flexible. In this article, we introduced how to install plug-ins through the Vue.use() method, how to register global directives, filters and components, and how to use plug-ins locally in a page or component. Finally, we also used a global loading indicator plug-in example to demonstrate the practical application of Vue.js plug-in development.

The above is the detailed content of VUE3 development basics: develop using Vue.js custom plug-ins. For more information, please follow other related articles on the PHP Chinese website!