The official documentation for developing vue plug-ins is described as follows:

Plug-ins usually add global functionality to Vue. There is no limit to the scope of plug-ins. Generally, there are the following kinds of plug-ins:
1. Add global methods or attributes, such as: vue-element.
2. Add global resources: instructions / filters / transitions, such as vue-touch
3. Adding some component options through the global mixin method, such as: vuex,
4. Add Vue instance methods and implement them by adding them to Vue.prototype.
5. A library that provides its own API and one or more of the functions mentioned above, such as vue-router
The plug-in for Vue.js should have a public method install. The first parameter of this method is the Vue constructor, and the second parameter is an optional option object:

MyPlugin.install = function (Vue, options) {
// 1. Add global methods or attributes
  Vue.myGlobalMethod = function () {
// Logic...
  }

// 2. Adding global resources
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
// Logic...
    }
    ...
  })

// 3. Injection components
  Vue.mixin({
    created: function () {
// Logic...
    }
    ...
  })

// 4. Adding Instance Method
  Vue.prototype.$myMethod = function (options) {
// Logic...
  }
}

Use:
Using the plug-in through the global method Vue.use():
// Call `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
You can also pass in an option object (customize some of your own effects):
Vue.use(MyPlugin, { someOption: true })

After reading the document, you can try it on your own. First, you need to develop a paging plug-in, which can customize the maximum number of paging buttons and the number of content lists per page. In the page, you can define an Id element as the package container of the paging component, and the paging component can automatically render as its sub-elements. Render it on the page. In addition, we want to create this.$myMethod('id name', callback function, {configuration object}) in any Vue component under the vue-cli shelf.

Well, according to the above requirements, we should choose the "add instance method" to develop my component in combination with the document. Firstly, we need to build an index.js which should contain the registration function of our plug-in. Secondly, we need to make a paging vue component, template, style, and some logical methods written here. Thirdly, we need to set up an intermediate layer to manage data and methods.

It seems that my plug-in directory should be like this:

Take a look at index.js

import chooseP from './choosePages.vue' //Introducing components
import {peacemaker} from './delivery'  //Introducing Intermediate Layer
var ChoosePages = {};   //Define an object
ChoosePages.install = function (Vue,options) {
//Adding Instance Method
// id page element id name string type
// cb callback function to get the current page number
// op configuration object  
    Vue.prototype.$choosePages = (id,cb,op) => {
      for(let property in op){
        peacemaker.data[property] = op[property];
      }
      let choosePages = Vue.extend(chooseP);
      let tpl = new choosePages().$mount().$el;
      document.getElementById(id).appendChild(tpl);
      peacemaker.doThings = cb;
    }
}
export default ChoosePages;; //Exposing objects

Intermediate layer delivery.js

export const peacemaker = {
  data : {
    //Number of lists showing content 
    listsNum:0,
    //Number of content lists displayed per page
    itemsNum:5,
    //The maximum number of buttons displayed on the page
    btnNum :16
  },
  doThings : null //callback
}

Paging component choosePage.vue

<template>
  <div class="choosePages">
    <a href="javascript:;" class="firstPage" @click="toFirst">home page</a><a
    href="javascript:;" class="last" @click="chooseBtnLast"><i></i></a><a
    href="javascript:;"v-for="item in showBtns" :class="{pageNum : chooseBtnIndex === item }" @click="clickBtn(item)">{{item}}</a><a
    href="javascript:;" class="next" @click="chooseBtnNext"><i></i></a><a
    href="javascript:;" class="lastPage" @click="toLast">Tail page</a><span
    class="hint" v-if="isShowRight">Jump To</span><input type="text" v-model="pageIndex" @keyup="goIndex" v-if="isShowRight"><span
    v-if="isShowRight">page</span><span v-if="isShowRight">common{{btns.length}}page</span>
  </div>
</template>
<script>
  import {peacemaker} from './delivery'
    export default {
    data(){
      return {
         btns : [],
         showBtns : [],
         chooseBtnIndex :1, //Page number
         overNum:0,
         pageIndex:'1',
      }
    },
    created() {
       this.createBtns(this.listsNum);
    },
    computed: {
      //Total number of data lists
      listsNum:function () {
        return  peacemaker.data.listsNum
      },
      //Number of content lists displayed per page
      itemsNum:function () {
        return  peacemaker.data.itemsNum
      },
      //Number of pages displayed at most
      lengthBtns: function () {
        return peacemaker.data.btnNum
      },
      //When the number of buttons is larger than the limited display, display the jump page check box
      isShowRight:function () {
        return this.btns.length > this.lengthBtns ? true : false;
      }
    },
    methods: {
      //Jump pages
       goIndex(e){
         if(e.keyCode !== 13 || +this.pageIndex > this.btns.length){
           return;
         }
         this.chooseBtnIndex = +this.pageIndex;
         this.getPageMessage ();
         if(+this.pageIndex > this.lengthBtns){ //Selected pages are larger than the display limit
           this.overNum = +this.pageIndex - this.lengthBtns;
           this.showBtns = null;
           this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
         }else{
           this.overNum=0;
           this.showBtns = null;
           this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
         }
       },
      //Five lists are one page (default configurable)
       createBtns(n){
         let length = 0;
         if(n>this.itemsNum){
           length = parseInt(n/this.itemsNum);
           if(parseInt(n%this.itemsNum)>0){
             length = length + 1;
           }
           for(let i=0;i<length;i++){
             this.btns.push(i+1);
           }
           if(this.btns.length>this.lengthBtns){ //Button Length Should Not Be More Than Length Settings
             this.showBtns = null;
             this.showBtns = this.btns.slice(0,this.lengthBtns);
           }else{
             this.showBtns = null;
             this.showBtns = this.btns;
           }

         }else {
           return;
         }
       },
        getPageMessage (){
           //Request page information for selection
           console.log( 'The page of the request:'+this.chooseBtnIndex);
           //Pass the number of pages through the callback function
          peacemaker.doThings(this.chooseBtnIndex);
        },
       clickBtn(index){
         this.chooseBtnIndex = index;
         this.getPageMessage ();
       },
      chooseBtnLast(){  //The former button
         if(this.chooseBtnIndex === 1){
           return
         }
         this.chooseBtnIndex--;
         this.getPageMessage ();
         if(this.overNum>0){ //Button Length Should Not Be More Than Length Settings
            this.overNum--;
           if(this.overNum < 0){
             return
           }
            this.showBtns = null;
            this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
         }
      },
      chooseBtnNext(){  //The latter button moves backwards
        if(this.chooseBtnIndex === this.btns.length){
          return
        }
        this.chooseBtnIndex++;
        this.getPageMessage ();
        if(this.chooseBtnIndex>this.lengthBtns){ //Button Length Should Not Be More Than Length Settings
          this.overNum++;
          this.showBtns = null;
          this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
        }
      },
      toFirst(){
        if(this.chooseBtnIndex === 1){
          return
        }
        this.chooseBtnIndex=1;
        this.getPageMessage ();
        if(this.overNum>0){ //Button Length Should Not Be More Than Length Settings
          this.overNum=0;
          this.showBtns = null;
          this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
        }
      },
      toLast(){
        if(this.chooseBtnIndex === this.btns.length){
          return
        }
        this.chooseBtnIndex=this.btns.length;
        this.getPageMessage ();
        if(this.btns.length>this.lengthBtns){ //Button Length Should Not Be More Than Length Settings
          this.overNum = this.btns.length - this.lengthBtns;
          this.showBtns = null;
          this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
        }
      }
    },
  }
</script>

<style scoped lang="css">
  .choosePages{
    text-align: center;
    margin: 34px 0;
  }
  .choosePages a{
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #999;
    margin-right: 10px;
    color:#333;
    background: #fff;
    font-size: 13px;
  }
  .choosePages a i{
    display: inline-block;
    width: 10px;
    height: 12px;
  }
  .choosePages .last i{
    background: url("./icon/icon_last@2x.png") no-repeat 0 0;
    background-size: 10px 12px;
  }
  .choosePages .last:hover{
    background: rgba(200,200,200,.2);
  }
  .choosePages .next i{
    background: url("./icon/icon_next@2x.png") no-repeat 0 0;
    background-size: 10px 12px;
  }
  .choosePages  .next:hover{
    background: rgba(200,200,200,.2);
  }
  .choosePages .pageNum{
    background: #000;
    border: 1px solid #000;
    color: #fff;
  }
  .choosePages .firstPage,.choosePages .lastPage{
    width: 45px;
  }
   .choosePages .firstPage:hover,.choosePages .lastPage:hover{
     background: #f2f2f2;
     border: 1px solid #666;
   }
  .choosePages .lastPage{
    margin-right: 0;
  }
  .choosePages span{
    color:#333;
    font-size: 13px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .choosePages .hint{
    margin-left: 15px;
  }
  .choosePages input{
    width: 26px;
    text-align: center;
  }
</style>

Then how to use it, in the entry JS file (app.js)

import ChoosePages from '../../plugin/choosePage/index' //Introducing plug-in files
Vue.use(ChoosePages);  //Using plug-ins

Finally, it can be applied in the components that need to be applied.

this.$choosePages('pagesBtn',function(index){
         console.log(index,'I am on the application page');
    },
    {
      listsNum:10, // Number of tabular data (required)
      itemsNum:5,  // Number of lists to be displayed per page (default 5, optional)
      btnNum :4    // Page limits the number of buttons displayed (default 16, fill in)
    })

ps: The above is a simple small development of vue plug-in. Due to my limited ability, there will inevitably be mistakes and omissions. Welcome to leave a message to correct them! ___________

Here is a demo address:

https://github.com/h1zsh1/MyPlugin-ChoosePage