vue批量注册全局组件（vue无需引用即可在页面使用组件）

平时我们在开发时使用一些组件频率比较高的时候每个页面都去引入就会比较麻烦，这时我们可以全局去注册这些组件，然后就不用每个页面去引用了

普通单个注册

组件内或根目录新建components.js文件

import Card from '@/components/card/card.vue'

let customComponents = {
    install:function(Vue){//在use的时候vue会自动调用此方法
         Vue.component('Card', Card)//注册当前组件
    }
}
export default customComponents;

main.js

import customComponents from '@/components/index/components.js'
Vue.use(customComponents);

批量注册

借助require.context()方法

let customComponents = {
    install:function(Vue){//在use的时候vue会自动调用此方法
            const files = require.context("@/components", true, /\.vue$/)//返回的是一个函数
            // require.context()的参数
            // 参数一 {String}：读取文件的目录路径    
            // 参数二 {Boolean}：是否深入遍历，即是否遍历子目录（二级目录）
            // 参数三 {RegExp}：匹配目录内文件的正则表达式/\.vue$/表示匹配所有.vue后缀名的文件
            console.log(files.keys(),'files.keys()')//files.keys()可以得到所有匹配到文件路径（数组）
            files.keys().forEach(item=>{
                console.log(files(item),'files(item)')//传入路径即可得到当前路径文件vue实例
                const name = files(item).default.name//当前组件的名字（组件内一定要有name属性）
                Vue.component(name, defaultObj)//注册当前组件
            })
    }
}
export default customComponents;

main.js

import customComponents from '@/components/index/components.js'
Vue.use(customComponents);

批量注册二

新建index.js文件将需要注册的组件统一引入然后统一暴露

import Card from '@/components/card/card.vue'
import Search from "@/components/RPM/search/search.vue"
export{
    Card,
    Search
}

let customComponents = {
    install:function(Vue){//在use的时候vue会自动调用此方法
            import('@/components/index/index.js').then(res=>{
                Object.keys(res).forEach(item=>{
                    Vue.component(item,res[item])
                 })
             })
    }
}
export default customComponents;

main.js

import customComponents from '@/components/index/components.js'
Vue.use(customComponents);