vue3项目中批量引入组件

在vue3项目中，对于公共的组件我们可以统一的引用注册，避免一个一个文件进行引入配置

组件目录结构

• common

  • components

    • my-demo

      • index.vue

    • other-demo

      • index.vue

  • index.js

主文件index.js

vite配置方式

const imports = import.meta.globEager("./components/**/*.vue");
export default {
  install(app) {
    for (const key in imports) {
      const component = imports[key];
      const name = key.replace("./components/", "").replace("/index.vue", "");
      app.component(name, component.default);
    }
  },
};

wepback配置方式

const requireCom = require.context('./components', true, /\.vue$/)
export default {
   install(app) {
     requireCom.keys().forEach((key) => {
       const _component = requireCom(key)
       app.component(key.split('/')[1], _component.default || _component)
     })
  },
}

使用组件

import { createApp } from "vue";
import App from "./App.vue";
import commonVue from "@/common";
const app = createApp(App);
app
  .use(commonVue)
  .mount("#app");