Vue3统一导出局部组件和全局组件

局部组件统一导出

components新增ComponentA.vue、ComponentB.vue两个组件
新增index.js进行组件统一导入

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'export {ComponentA,ComponentB
}

使用

<template><ComponentA /><ComponentB />
</template>
<script setup>
import { ComponentA, ComponentB } from "./components"
</script>

全局组件统一导出

components新增global文件夹标识为全局组件
global新增Component1.vue、Component2.vue两个组件
新增index.js进行组件统一导入

import Component1 from './Component1.vue'
import Component2 from './Component2.vue'export {Component1,Component2
}

在main.js进行全局注册

import { createApp } from 'vue'
import App from './App.vue'
import * as components from './components/global'const app = createApp(App)Object.entries(components).forEach(([name, component]) => {app.component(name, component)
})app.mount('#app')

使用

<template><ComponentA /><ComponentB />
</template>
<script setup></script>