步骤

①先在components文件夹中建一个空的文件夹，命名根据自己的喜好

②在你所建的文件夹中建一个index.js文件（用于管理所有的组件）；

③在你所建的index.js文件中放入如下代码（这里面封装的是webpack的require.context（）方法，基本是固定的）：

import Vue from 'vue'

const componentsContext = require.context('./', true, /\.js$/);
//console.log(componentsContext);
//console.log(componentsContext.keys());

componentsContext.keys().forEach(component => {
    const componentConfig = componentsContext(component);
    // 兼容import export和require module.export两种规范
    const ctrl = componentConfig.default || componentConfig;
    // 加载全局组件
    if (ctrl && ctrl.name) {
        Vue.component(ctrl.name, ctrl);
       // Vue.component('myComponent',{render(){return <h1>hello world</h1>}});
    }
})

require.context()方法补充：这篇文章我觉得对此方法总结的特别详细
https://juejin.cn/post/6844903583113019405#heading-5

④接着在index.js的同级建立对应的组件文件夹

⑤在刚刚建的组件文件夹中再创建一个index.js文件和一个你所要创建的组件的名字（如：轮播组件：banner.vue）

⑥在banner.vue内放入你所写的组件的逻辑即可，在index.js文件中直接放入如下代码：

import banner from './banner.vue'//导入同级的banner.vue文件
export default banner//将轮播组件导出 注意名字的对应

⑦在main.js中引入全局自定义组件

⑧在需要的页面直接调用即可