实现vue全局组件
注册全局组件
在Vue中注册全局组件可以通过Vue.component方法完成。该方法接受两个参数：组件名称和组件选项对象。全局注册的组件可以在任何Vue实例的模板中使用，无需再次注册。
import Vue from 'vue';
import MyComponent from './MyComponent.vue';
Vue.component('my-component', MyComponent);自动批量注册
对于需要批量注册多个全局组件的情况，可以通过遍历组件目录实现自动化注册。使用Webpack的require.context可以动态导入组件文件。
import Vue from 'vue';
const requireComponent = require.context(
'./components', // 组件目录相对路径
false, // 是否查询子目录
/\.vue$/ // 匹配组件文件名的正则表达式
);
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName);
const componentName = fileName.replace(/^\.\//, '').replace(/\.vue$/, '');
Vue.component(componentName, componentConfig.default || componentConfig);
});插件式注册
将全局组件封装为Vue插件可以更好地组织代码。创建一个插件文件，通过install方法注册组件。
// components-plugin.js
import MyComponent1 from './MyComponent1.vue';
import MyComponent2 from './MyComponent2.vue';
export default {
install(Vue) {
Vue.component('my-component1', MyComponent1);
Vue.component('my-component2', MyComponent2);
}
};
// main.js
import Vue from 'vue';
import ComponentsPlugin from './components-plugin';
Vue.use(ComponentsPlugin);全局基础组件规范
建议为全局组件建立命名规范，通常以特定前缀区分全局组件和局部组件。例如所有全局组件使用Base前缀。
Vue.component('BaseButton', {
// 组件选项
});注意事项
全局组件会增加最终打包体积，应该谨慎使用。只有真正需要在应用各处使用的组件才适合全局注册。对于特定页面或功能使用的组件，建议使用局部注册。
全局组件名称应该使用kebab-case（短横线分隔命名），因为在DOM模板中只有这种方式是有效的。在字符串模板或单文件组件中可以任意使用，但保持统一风格更好。
