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

根本组件的自动化全局注册

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

1. import dgDialog from "@/components/dgDialog/index.vue";
2. import svgIcon from "@/components/svgIcon/index.vue";
3. const allComponent = { dgDialog, svgIcon };
4. export default {
5.     install(app) {
6.         console.log(app, "app"); //App.vue
7.         Object.keys(allComponent).forEach((key) => {
8.             console.log(key, "key"); //dgDialog svgIcon
9.             app.component(key, allComponent[key]);
10.         });
11.     },
12. };
15. // 或是
16. const ComponentRegister = {
17.     install(Vue) {
18.         console.log(Vue, "Vue"); //App.vue
19.         Object.keys(allComponent).forEach((key) => {
20.             console.log(key, "key");
21.             Vue.component(key, allComponent[key]);
22.         });
23.     }
24. }
27. export default ComponentRegister;

复制代码

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

使用 require.context方法引入组件

1. // 所有组件放在一个`components`文件夹内的写法
2. const ComponentRegister = {
3.     install(Vue) {
4.         // 文件结构为components/组件名称.vue
5.         const requireComponent = require.context(
6.             // 其组件目录的相对路径
7.             "@/components",
8.             // 是否查询其子目录
9.             false,
10.             // 匹配基础组件文件名的正则表达式
11.             /\.(vue|js)$/
12.         );
15.         requireComponent.keys().forEach((fileName) => {
16.             // 获取组件配置
17.             const componentConfig = requireComponent(fileName);
20.             // 获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称
21.             const componentName =
22.                 componentConfig.default.name ||
23.                 fileName
24.                     .split("/")
25.                     .pop()
26.                     .replace(/\.\w+$/, ""); //或 fileName.replace(/^\.\/(.*)\.\w+$/, "$1");
27.             // 全局注册组件
28.             Vue.component(
29.                 componentName,
30.                 // 如果这个组件选项是通过 `export default` 导出的，
31.                 // 那么就会优先使用 `.default`，
32.                 // 否则回退到使用模块的根。
33.                 componentConfig.default || componentConfig
34.             );
35.         });
36.     },
37. };
40. export default ComponentRegister;

复制代码

1. // 组件以文件夹名称命名
2. const ComponentRegister = {
3.     install(Vue) {
4.         // 文件结构为文件夹名称（即组件名称）/index.vue
5.         const requireComponent = require.context(
6.             // 其组件目录的相对路径
7.             "@/components/",
8.             // 是否查询其子目录
9.             true,
10.             // 匹配基础组件文件名的正则表达式
11.             /\.(vue|js)$/
12.         );
13.         requireComponent.keys().forEach((fileName) => {
14.             // 获取组件配置
15.             const componentConfig = requireComponent(fileName);
18.             //获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称
19.             const componentName =
20.                 componentConfig.default.name ||
21.                 fileName
22.                     .replace(/^\.\/(.*)\.\w+$/, "$1")
23.                     .split("/")
24.                     .shift(); //移除数组第一个元素  结果为 文件夹名称
25.             // .pop()//移除最后一个数组元素 结果为index
28.             // 全局注册组件
29.             Vue.component(
30.                 componentName,
31.                 // 如果这个组件选项是通过 `export default` 导出的，
32.                 // 那么就会优先使用 `.default`，
33.                 // 否则回退到使用模块的根。
34.                 componentConfig.default || componentConfig
35.             );
36.         });
37.     },
38. };
41. export default ComponentRegister;

复制代码

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

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

1. const ComponentRegister = {
2.     install(Vue) {
3.         //获取所有的vue文件
4.         const requireComponent = import.meta.glob("@/components/*/*.vue", {
5.             // import: 'default',
6.             as: "component",
7.             eager: true,
8.         });
11.         /**
12.          * (\/[^\/]+)+ 匹配一个或多个以/开头，后面跟着一个或多个非/字符的序列。这对应于路径中的目录名。
13.          * \/ 匹配/字符，它是目录名与我们要提取的部分之间的分隔符。
14.          * ([^\/]+) 匹配一个或多个非/字符，这就是我们要提取的部分（文件夹名称）。
15.          * \/ 再次匹配/字符，表示提取部分的结束和下一个目录或文件的开始。
16.          * */
17.         const re = /(\/[^\/]+)+\/([^\/]+)\//; //或是 /\/components\/(.*?)\//;  i.match(re)[1];
18.         for (const i in requireComponent) {
19.             //获取当前遍历的组件
20.             const componentName = i.match(re)[2];
21.             const componentConfig = requireComponent[i];
22.             Vue.component(componentName, componentConfig.default || componentConfig);
23.         }
24.     },
25. };
28. export default ComponentRegister;

复制代码

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

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

复制代码

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