分别用webpack和vite注册全局组件

基础组件的自动化全局注册

1. 组件全部导入后，批量注册

import dgDialog from "@/components/dgDialog/index.vue";
import svgIcon from "@/components/svgIcon/index.vue";
const allComponent = { dgDialog, svgIcon };
export default {
    install(app) {
        console.log(app, "app"); //App.vue
        Object.keys(allComponent).forEach((key) => {
            console.log(key, "key"); //dgDialog svgIcon
            app.component(key, allComponent[key]);
        });
    },
};


// 或是
const ComponentRegister = {
    install(Vue) {
        console.log(Vue, "Vue"); //App.vue
        Object.keys(allComponent).forEach((key) => {
            console.log(key, "key");
            Vue.component(key, allComponent[key]);
        });
    }
}


export default ComponentRegister;

2. 使用webpack(或在内部使用了webpack的 Vue CLI 3+)全局注册组件

使用 require.context方法引入组件

// 所有组件放在一个`components`文件夹内的写法
const ComponentRegister = {
    install(Vue) {
        // 文件结构为components/组件名称.vue
        const requireComponent = require.context(
            // 其组件目录的相对路径
            "@/components",
            // 是否查询其子目录
            false,
            // 匹配基础组件文件名的正则表达式
            /\.(vue|js)$/
        );


        requireComponent.keys().forEach((fileName) => {
            // 获取组件配置
            const componentConfig = requireComponent(fileName);


            // 获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称
            const componentName =
                componentConfig.default.name ||
                fileName
                    .split("/")
                    .pop()
                    .replace(/\.\w+$/, ""); //或 fileName.replace(/^\.\/(.*)\.\w+$/, "$1");
            // 全局注册组件
            Vue.component(
                componentName,
                // 如果这个组件选项是通过 `export default` 导出的，
                // 那么就会优先使用 `.default`，
                // 否则回退到使用模块的根。
                componentConfig.default || componentConfig
            );
        });
    },
};


export default ComponentRegister;

// 组件以文件夹名称命名
const ComponentRegister = {
    install(Vue) {
        // 文件结构为文件夹名称（即组件名称）/index.vue
        const requireComponent = require.context(
            // 其组件目录的相对路径
            "@/components/",
            // 是否查询其子目录
            true,
            // 匹配基础组件文件名的正则表达式
            /\.(vue|js)$/
        );
        requireComponent.keys().forEach((fileName) => {
            // 获取组件配置
            const componentConfig = requireComponent(fileName);


            //获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称
            const componentName =
                componentConfig.default.name ||
                fileName
                    .replace(/^\.\/(.*)\.\w+$/, "$1")
                    .split("/")
                    .shift(); //移除数组第一个元素  结果为 文件夹名称
            // .pop()//移除最后一个数组元素 结果为index


            // 全局注册组件
            Vue.component(
                componentName,
                // 如果这个组件选项是通过 `export default` 导出的，
                // 那么就会优先使用 `.default`，
                // 否则回退到使用模块的根。
                componentConfig.default || componentConfig
            );
        });
    },
};


export default ComponentRegister;

3. 使用vite方法全局注册组件

使用import.meta.glob方法引入组件

const ComponentRegister = {
    install(Vue) {
        //获取所有的vue文件
        const requireComponent = import.meta.glob("@/components/*/*.vue", {
            // import: 'default',
            as: "component",
            eager: true,
        });


        /**
         * (\/[^\/]+)+ 匹配一个或多个以/开头，后面跟着一个或多个非/字符的序列。这对应于路径中的目录名。
         * \/ 匹配/字符，它是目录名与我们要提取的部分之间的分隔符。
         * ([^\/]+) 匹配一个或多个非/字符，这就是我们要提取的部分（文件夹名称）。
         * \/ 再次匹配/字符，表示提取部分的结束和下一个目录或文件的开始。
         * */
        const re = /(\/[^\/]+)+\/([^\/]+)\//; //或是 /\/components\/(.*?)\//;  i.match(re)[1];
        for (const i in requireComponent) {
            //获取当前遍历的组件
            const componentName = i.match(re)[2];
            const componentConfig = requireComponent[i];
            Vue.component(componentName, componentConfig.default || componentConfig);
        }
    },
};


export default ComponentRegister;

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。如下

//注册组件到全局
Vue.component("Profile", Profile);
//创建vue
var vue = new Vue({
    el: "#app",
    data: {
        msg: "Vue是最简单的",
    },
});