vue3 src/components文件夹下的所有vue页面注册

本文链接：https://blog.csdn.net/weixin_42459543/article/details/135956595

本文详细介绍了在Vue3中如何在src/components文件夹下进行组件的全局注册，包括创建入口文件、获取并注册组件，以及在主入口文件中整合，实现组件的模块化和复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序言

在Vue 3中，src/components文件夹下的所有Vue页面注册是指将组件注册到Vue应用程序中，以便在其他地方使用。这样可以将组件进行模块化管理，提高代码的可维护性和复用性。

在Vue 3中，组件的注册有全局注册方式

第一步、新建components文件夹

首先新建components文件夹并在文件夹里面设置两个组件页面，并写index.js入口文件，我们要在这个入口文件里面写具体函数方法。

在具体页面直接引用，无需在继续导入文件，再注册；

第二步、components/index.js

获取components文件夹下的所有vue文件

export default function globalComponents(app) {
  const components =  import.meta.globEager('@/components/**.vue') //获取文件夹及其嵌套的多级子文件夹
  console.log( components,' components')
  for (let [key, value] of Object.entries(components)) {
    const name = key.replace("./", "").split("/")[1];
    app.component(value.default.__name || name, value.default);
  }
}

第三步、主入口main.js写入

import App from './App.vue'

//公共组件库引入
import globalComponents from "@/components/index";
const app = createApp(App)
//将component文件下vue组件注册到app上
globalComponents(app);

自此我们的组件页面就可以展示了