vue-006 自动注册全局组件

实现代码

• Button.vue

// src/component/base/Button.vue # base为自定义文件名

//  Button.vue
<template>
  <button type="button">Press me!</button>
</template>

• _globals.js

// src/includes/_globals.js # includes 是存放插件的地方

//  _globals.js
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

export default {
  install(app) {
    const baseComponents = import.meta.glob("../components/base/*.vue", {
      eager: true,
    });

    Object.entries(baseComponents).forEach(([path, module]) => {
      const componentName = upperFirst(
        camelCase(
          path
            .split("/")
            .pop()
            .replace(/\.\w+$/, "")
        )
      );
      //console.log(path, componentName);

      // export default
      app.component(`Base${componentName}`, module.default);
    });
  },
};

• main.js

// 注册

import GlobalComponents from "./includes/_globals";
app.use(GlobalComponents);

• 使用

<base-button>

拓展了解

_globals.js 中注册全局组件的步骤

代码解析

const baseComponents = import.meta.glob("../components/base/*.vue", {
  eager: true,
});
// 参数定义路径模式
// eager是加快加载速度

• Object.entries() 静态方法返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。
• pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。