vue3 require.context 动态使用components组件 全局注册

在Vue 3.0中，无法直接使用Vue.component进行组件注册，而是使用createApp()返回的实例进行全局注册。可以通过使用require.context来实现动态使用components组件的全局注册。首先，在main.js中引入createApp和App组件，并创建app实例。然后，使用require.context来获取components文件夹下的所有.vue文件，并遍历注册每个组件。最后，使用app.component进行全局注册，并使用app.use(router)和app.mount('#app')来启动应用。以下是示例代码：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);

const requireComponent = require.context(
  './components',
  false,
  /\.vue$/
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  app.component(
    componentConfig.default.name,
    componentConfig.default || componentConfig
  )
})

app.use(router)
app.mount('#app')

这样，你就可以在所有页面中使用动态注册的组件了。