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

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.vueObject.keys(allComponent).forEach((key) => {console.log(key, "key"); //dgDialog svgIconapp.component(key, allComponent[key]);});},
};// 或是
const ComponentRegister = {install(Vue) {console.log(Vue, "Vue"); //App.vueObject.keys(allComponent).forEach((key) => {console.log(key, "key");Vue.component(key, allComponent[key]);});}
}export default ComponentRegister;

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

使用 require.context方法引入组件

// 所有组件放在一个`components`文件夹内的写法
const ComponentRegister = {install(Vue) {// 文件结构为components/组件名称.vueconst 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.vueconst 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是最简单的",},
});