首先在自己的項目路徑的組件目錄components下創(chuàng)建pagination文件夾，我已分頁組件為例，pagination文件夾下有兩個文件index.js、pagination.vue。

index.js

import pagination from './pagination.vue'

const Pagination = {
    install(Vue) {
        Vue.component('Pagination',pagination)
    }
}

// 導(dǎo)出組件
export default Pagination

pagination.vue

// 只復(fù)制了部分代碼
<template>
    <ul class="pagination">
        <li class="total">
            共 {{ total }} 條
        </li>
        <li :class="{'disabled': current == 1}">
            <a class="btn-l" @click="switchPage(1)">首頁</a>
        </li>
        <li :class="{'disabled': current == 1}">
            <a class="btn-l" @click="switchPage(current - 1)">上一頁</a>
        </li>
        <li v-for="v in pagelist" :class="{'current': current == v.val}">
            <a @click="switchPage(v.val)"> {{ v.text }} </a>
        </li>
        <li :class="{'disabled': current == page}">
            <a class="btn-l" @click="switchPage(current + 1)">下一頁</a>
        </li>
        <li :class="{'disabled': current == page}">
            <a class="btn-l" @click="switchPage(page)">尾頁</a>
        </li>
    </ul>
</template>

在main.js中引入

import Vue from 'vue';
import App from '@/App';

/* ==================
  Pagination組件引入
 ==================== */
import Pagination from '@/components/pagination/index';
Vue.use(Pagination);

new Vue({
    el: '#app',
    render: h => h(App)
})

在main.js中引入后，就可以在其他頁面中使用，比如在App.Vue頁面使用

<template>
  <Pagination :total="total" :current='current' :item="item" @pagechange="pagechange"></Pagination>
</template>