局部组件统一导出
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>