vue全局组件自动注册直接使用，无需单独先引用注册再使用

目录结构：

本案例是在根目录下components文件夹测试的，文件位置项目内任意，确保在main.js挂载路径正确即可

 

 1、新建文件夹（名字随意）zxy_components (放自己组件的地方)

 2、在zxy_components文件夹下

        ！新建文件夹zxy_ui(放vue文件)

    ！！新建index.js(放挂载全局组件的方法)

 3、自定义两个组件zxy-style.vue和zxy-button.vue

代码： 自定义组件中切记有组件名name:'组件名'

zxy-style.vue

 zxy-button.vue

4、index.js方法：

import Vue from 'vue';

//自动加载 zxy_ui 目录下的 .vue 结尾的文件
const componentsContext = require.context("./zxy_ui", true, /\.vue$/)
// componentsContext 是一个函数
// componentsContext.keys() 是包含zxy_ui目录下vue文件的数组
componentsContext.keys().forEach(item => {
	//componentsContext(item) 是一个模块
	const componentConfig = componentsContext(item);
	// 兼容 import export 和 require module.export 两种规范
	const assembly = componentConfig.default || componentConfig
	Vue.component(assembly.name, assembly) //注册当前组件
})

5、main.js挂载：

import '@/components/zxy_components';

6、页面使用：不需要引用注册