vue使用vue.use()注册全局组件

首先建一个自定义组件的文件夹，比如叫Basetable文件夹，里面有一个index.js，还有一个自定义组件Basetable.vue,在这个Basetable.vue里面就是这个组件的具体的内容，比如：

image.png

<template>
    <div>
        Basetable组件的内容..............
    </div>
</template>

<script>
    export default {

    }
</script>

接下来就是index.js文件，在index.js中，规定了使用这个组件的名字，以及使用方法，如：

// 单文件引入方式
import Basetable from './Basetable.vue'

const VueBasetable = {
    install: function(Vue) {
        Vue.component('Basetable', Basetable)
    }
    // 第一个参数是：'Basetable' 这就是后面可以使用的组件的名字，第二个参数是：Basetable 当前引入的组件    
    // install是默认的一个方法
}

export default VueBasetable

// 多个文件引入方式
import Basetable from './Basetable.vue'
import loading from './loading.vue'

const VueLoading = {
    install: function(Vue) {
        Vue.component('loading', loading)
    }
}
const VueBasetable = {
    install: function(Vue) {
        Vue.component('Basetable', Basetable)
    }
}

export {
    VueLoading,
    VueBasetable
}

引入main.js文件

// 引入自定义组件。index.js是组件的默认入口
//单引入
import BaseTable from '@/components/BaseTable'
Vue.use(BaseTable)

//多引入
import { VueBasetable,VueLoading } from '@/components/BaseTable'
Vue.use(VueBasetable)
Vue.use(VueLoading)

// 只看引入方式，别的细节不必在意。看引入的形式就对了