引言：当我们开发一个很大的项目的时候，往往需要封装很多全局组件来复用，这时如果我们一个个的在main.js通过去完成全局注册就非常麻烦，所以我们得自动注册全局组件直接使用。

本文主讲vue3+vite的项目

vite不像webpack可以使用require.context方法进行处理，这里就不细说了。
ok，我们来看看vite中的引入方式。

• import.meta.glob 为过动态导入
• import.meta.globEager 为直接引入
  先看下目录结构：
  

我们在components目录下创建一个index.js文件，全局的组件放在global文件夹下，根据个人习惯自行命名和存放位置哦

/*
 **全局注册组件
 ** 放在components/global文件夹下
 */
import { defineAsyncComponent } from 'vue';
const components = import.meta.glob('./global/*.vue'); // 异步方式
export default function install(app) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
    app.component(name, defineAsyncComponent(value));
  }
}

然后我们在main.js import引入

import components from '@/components/index'
app.use(components)

比如：看下全局组件 AppNoData.vue

然后在我们需要用到该AppNoData.vue组件的时候，直接即可

  <AppNoData></AppNoData>