By yugasun from yugasun.com/post/you-ma… This article can be reproduced in full, but the original author and source need to be retained.

I met a plug-in

Although vue.js is powerful enough, in actual development, we still need to introduce various modules to fulfill our functional requirements, or add some global functionality to the global Vue object, and the Vue plug-in is to help us do this work.

Developing a plug-in

There is no limit to the range of Vuejs plug-ins. There are generally the following types:

  1. Add global methods or attributes, such as vue-custom-element
  2. Add global resources: directives, filters, transitions, etc., such as vue-touch
  3. Add some component options, such as vue-router, through the global mixin method
  4. Add Vue instance methods by adding them toVue.prototypeOn the implementation.
  5. A library that provides its own API and provides one or more of the features mentioned above, such as vue-Router

The Vuejs plug-in should have a public method install, which takes a Vue constructor as its first argument and an optional configuration object as its second argument, written as follows:

MyPlugin.install = function(Vue, options) {
  // 1. Add a global method or attribute
  Vue.myGlobalProp = 'yugasun';
  Vue.myGlobalMethod = function() {
    / / logic
  };

  // 2. Add global resources:
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
      / / logic}});// 3. Inject generic methods or properties into components
  Vue.mixin({
    data(){
      return {
        // Common data,
      };
    },
    created() {
      / / logic}});// 4. Add instance methods
  Vue.prototype.$myMethod = function(methodOptions) {
    / / logic
  };
};
Copy the code

The use of plug-in

Plugins are easy to use, just import and call vue.use () :

import Vue from 'vue';
import MyPlugin from './MyPlugin';
Vue.use(MyPlugin, {someOption: true});
Copy the code

The development of component

The vue-axios-plugin, for example, is a re-wrapped axiOS plug-in that makes it easy to call the request method directly in a project via this.$http.get/ POST.

First, create the entry file vue-axios-plugin.js based on the template above:

const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) = >{}export default VueAxiosPlugin
Copy the code

Then add the instance method to Vue:

import axios from 'axios'
const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) = > {
  const service = axios.create(options)
  Vue.prototype.$axios = service
  Vue.prototype.$http = {
    get: (url, data, options) = > {
      letaxiosOpt = { ... options, ... {method: 'get'.url: url,
          params: data
        }
      }
      return service(axiosOpt);
    },
    post: (url, data, options) = > {
      letaxiosOpt = { ... options, ... {method: 'post'.url: url,
          data: data
        }
      }
      returnservice(axiosOpt); }}}export default VueAxiosPlugin
Copy the code

For details on how to use Axios, see the official axios documentation

Now that the basic development of the plug-in is complete, test it in the project:

import VueAxiosPlugin from './vue-axios-plugin'
Vue.use(VueAxiosPlugin)
Copy the code

Then you can use the added global methods directly in your component:

 var app = new Vue({
  el: '#app'.data: {
    content: 'Sending... '
  },
  methods: {
    getUserInfo() {
      Promise.all([
        this.$http.get('http://yapi.demo.qunar.com/mock/5802/user', { id: 1 }),
        this.$http.post('http://yapi.demo.qunar.com/mock/5802/user', {
          username: 'yugasun'}, {headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
      ]).then((res) = > {
        console.log(res)
      }).catch((e) = > {
        console.log(e)
      })
    }
  },
  created() {
    this.getUserInfo()
  }
})
Copy the code

Release the component

The plugin is already written and you can copy the file and reuse it in different projects. If copying the file every time is a hassle, you can simply add the plug-in file directly to the project template by reading the previous custom development project template article. Of course, if your plugin is good enough, you can publish it to the NPM community and make it available to fellow programmers all over the world.

Emergency project at a time, there is a demand is hard to get, we will think out in search of the items we need, now that we got so much from the community, of course, also want to learn to be grateful, occasionally try to return, not how high the quality of the code, even if it is simply to help modify a errors in the documentation, it is also a contribution, Maybe this change of yours will save someone a half day of their time. Any project grows iteratively.

Feel free to contribute your first source code to GayGithub, the world’s largest gay dating site

The source code in this

Project directory

You-May-Not-Know-Vuejs