Vue.JS 3：全局自动注册自定义组件

import { createApp } from 'vue'


const app = createApp({})


app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

import MyComponent from './App.vue'


app.component('MyComponent', MyComponent)

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

<script setup>
import ComponentA from './ComponentA.vue'
</script>


<template>
  <ComponentA >
</template>

import ComponentA from './ComponentA.js'


export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

// 全局组件注册


// ==============================
// 写法一
const modulesFiles = import.meta.glob("@/components/*/*.vue", {
  eager: true,
});
const modules = {};
for (const key in modulesFiles) {
  const moduleName = key.replace(/(.*\/)*([^.]+).*/gi, "$2");


  const value = modulesFiles[key];
  modules[moduleName] = value.default;
  // modules[moduleName] = key;


  console.log("00000000000000000000");
  console.log("key:: " + key);
  console.log("moduleName:: " + moduleName);
  // console.log("value:: " + value);
}
console.log("+++++++++++++++++++");
console.log(modules);
export default modules;


// ==============================

[Vue warn]: Component is missing template or render function. 
  at <HelloWorld msg="Vite + Vue" > 
  at <HelloWorld onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

// 全局组件注册
import customComponent from "@/components/index";
console.log(JSON.parse(JSON.stringify(customComponent)));
Object.keys(customComponent).forEach((key) => {
  console.log("===================");
  console.log(key);
  console.log(customComponent[key]);


  // app.component(key, JSON.parse(JSON.stringify(customComponent[key])));
  app.component(key, customComponent[key]);
});

// 引入函数「createApp」
import { createApp } from "vue";


// 引入样式
import "@/styles/index.scss";


// 引入 Element Plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";


// 引入所有图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";


// 引入组件
import App from "./App.vue";


// 路由
import router from "./router";


// Pinia
import { createPinia } from "pinia";


// Pinia 持久化
// - 普通用法
// import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// - 进阶用法
import { createPersistedState } from "pinia-plugin-persistedstate";


// 创建 Pinia 实例
const pinia = createPinia();
// 添加 Pinia 持久化插件
// - 普通用法
// pinia.use(piniaPluginPersistedstate);
// - 进阶用法
pinia.use(
  createPersistedState({
    // 启用所有Store默认持久化
    auto: true,
    // 将数据持久化到哪里
    // storage: sessionStorage,
  }),
);
// - 重写 $reset 方法 解决组合式API中无法使用的问题
pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state));
  store.$reset = () => {
    store.$patch(initialState);
  };
});


// 创建 Vue 实例
const app = createApp(App);


// AXIOS
import axios from "axios";
import VueAxios from "vue-axios";
app.use(VueAxios, axios);


// 配置全局 API
import api from "@/api/index.js";
app.config.globalProperties.$api = api;


// 使用 Pinia
app.use(pinia);


// 配置全局 Store
import store from "@/store/index.js";
app.config.globalProperties.$store = store;


// 使用路由
app.use(router);


// 使用 Element Plus
app.use(ElementPlus, {
  //   size: "small",
  //   zIndex: 3000,
});


// 注册所有图标
// console.log(ElementPlusIconsVue);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}


// 混入「Mixins」
import mixin from "@/mixins/index.js";
app.mixin(mixin);


// 过滤器（Filters）
import { filters } from "@/filters/index.js";
app.config.globalProperties.$filters = filters;


// 全局组件注册
import customComponent from "@/components/index";
console.log(JSON.parse(JSON.stringify(customComponent)));
Object.keys(customComponent).forEach((key) => {
  console.log("===================");
  console.log(key);
  console.log(customComponent[key]);


  // app.component(key, JSON.parse(JSON.stringify(customComponent[key])));
  app.component(key, customComponent[key]);
});


// for (const key of Object.entries(customComponent)) {
//   console.log(key);
//   app.component(key, customComponent[key]);
// }


// for (const [key, component] of Object.entries(customComponent)) {
//   const componentObj = JSON.parse(JSON.stringify(component));
//   app.component(key, componentObj);
// }


// 挂载Vue实例
app.mount("#app");

<script setup>
// import HelloWorld from "../components/base/HelloWorld.vue";
</script>


<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" >
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" >
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" >
</template>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  transition: filter 300ms;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>