ToB企服应用市场:ToB评测及商务社交产业平台

标题: 分别用webpack和vite注册全局组件 [打印本页]

作者: 数据人与超自然意识 时间: 2024-11-2 22:31
标题: 分别用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是最简单的",
},
});

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4