前端全局注册知识【持续更新】

1.前端main.js自动注册全局组件

// 自动注册全局组件（必须加在Vue.use();的后面）const modulesFiles = require.context('./components', true, /\.vue$/);
modulesFiles.keys().map((modulePath, index) => {const moduleNames = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');const moduleSplit = moduleNames.split('/');const moduleName = moduleSplit[0];if (moduleSplit.length === 2 && moduleName === moduleSplit[1]) {const value = modulesFiles(modulePath);let moduleItem = value.default;Vue.component(moduleName, moduleItem);}解析：
1.查找 ./components 文件夹-》递归子目录（true）-》匹配 .vue 结尾的文件
const modulesFiles = require.context('./components', true, /\.vue$/);
2.遍历所有匹配到的 .vue 文件路径（如 ./Button/Button.vue）
modulesFiles.keys().map((modulePath, index) => {
3.把 ./Button/Button.vue 变成 Button/Button-》作用是去掉 ./ 和 .vueconst moduleNames = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
4.分割路径，比如 Button/Button → ['Button', 'Button']-》拿到 moduleName = 'Button'【核心判断：组件路径和文件名要一致，才会注册】const moduleSplit = moduleNames.split('/');const moduleName = moduleSplit[0];if (moduleSplit.length === 2 && moduleName === moduleSplit[1]) {
5.导入该 Vue 组件模块=》取出 default 导出的组件对象-》注册为 全局组件，使用方式：<Button />const value = modulesFiles(modulePath);let moduleItem = value.default;Vue.component(moduleName, moduleItem);}